onClick not working on iOS for SVGs in an Appcelerator Alloy app

Question

I am using this widget to display SVGs in my Titanium Alloy app:

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

The SVGs display just fine, but the onClick event does not fire when I tap on the SVG on iOS. Onclick does work on Android. I have tried applying the onClick to the widget itself as well as applying it to the containing element. I am able to click on the containing element, but not on the 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>

Is there a better widget for displaying SVGs or is there something I am doing wrong with applying the onclick?

Answer 1

Widget's do not support the onClick handler in the XML because they are not standard Titanium Proxy objects, they can be whatever their creator defines. Plus right now, even if an onClick property is specified, we don't evaluate the onClick parameter your passing in as a function.

To set a click event on the widget you'll need to do this in javaScript (so you'll want to give it an id)

In your XML change it to something like this:

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

Then in your javaScript you should be able to do this (based on what i can tell looking at the widgets source code).

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

Hope this helps!

Answer 2

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.