0

我正在使用这个小部件在我的 Titanium Alloy 应用程序中显示 SVG：

https://github.com/appcelerator-services/VectorImage

SVG 显示得很好，但是当我在 iOS 上点击 SVG 时不会触发 onClick 事件。Onclick 确实适用于 Android。我尝试将 onClick 应用于小部件本身以及将其应用于包含元素。我可以单击包含元素，但不能单击 SVG。

<View class="dashboardGridCell" onClick="goToPayBill">
    <View class="dashboardIcon">
        <Widget class="dashboardIconSvg" src="com.capnajax.vectorimage" svg="svg/circle-check.svg" style="svg/white-fill.css" onClick="goToPayBill"/>
    </View>
    <Label class="dashboardIconLabel">Pay Bill</Label>
</View>

是否有更好的小部件来显示 SVG，或者我在应用 onclick 时做错了什么？

4

2 回答 2

2

Widget 不支持 XML 中的 onClick 处理程序，因为它们不是标准的 Titanium 代理对象，它们可以是它们的创建者定义的任何东西。另外，现在，即使指定了 onClick 属性，我们也不会评估您作为函数传入的 onClick 参数。

要在小部件上设置点击事件，您需要在 javaScript 中执行此操作（因此您需要给它一个 id）

在您的 XML 中将其更改为以下内容：

<Widget id="dashboardIcon" class="dashboardIconSvg" src="com.capnajax.vectorimage" svg="svg/circle-check.svg" style="svg/white-fill.css" onClick="goToPayBill"/>

然后在您的 JavaScript 中，您应该能够做到这一点（根据我在查看小部件源代码时所知道的）。

$.dashboardIcon.getView().addEventListener('click', function(){ alert("It Works"});

希望这可以帮助！

于 2016-02-12T15:22:49.807 回答
0

I was able to get the onclick to work on iOS by modifying the source code for the widget from https://github.com/appcelerator-services/VectorImage. On line 197 of controllers/widget.js I added this line, which applies an empty onclick listener to the webview containing the SVG element:

// Added empty click listener to allow click events to be passed through
view.addEventListener('click', function() {});

Then in my own view, I was able to apply an onclick to the containing element, and the onclick now fires correctly when I tap on the SVG. I did not have to add an onclick to the widget element, and I did not have to apply the onclick in my controller's javascript.

<View class="dashboardGridCell" onClick="goToPayBill">
    <View class="dashboardIcon">
        <Widget class="dashboardIconSvg" src="com.capnajax.vectorimage" svg="svg/circle-check.svg" style="svg/white-fill.css"/>
    </View>
    <Label class="dashboardIconLabel">Pay Bill</Label>
</View>

Applying the onclick via JavaScript using the method in the first answer did not work. Although this fix is working for me, I am open to suggestions for a better way to get the onclick to fire.

于 2016-02-15T14:06:19.453 回答