touch triggers through multiple layers

[Michael]

I have a basic test app running. It contains a landing page with an image on it and a button below the image. If you click the image, an alert pops up. If you click the button, a modal view pops up. The trouble is, when you click "close" on the modal, it triggers the alert event for the image (as long as you touch the part of the button that overlays the image in the background). This appears to be true for any kind of popover layer view.

I am testing on an android 4x device through ICENIUM. It runs fine in the simulator.

Anything to do about this?

Thanks

[Petyo]

Hi Michael,

the underlying reason for this is the delayed click event on touch devices, which is present both in iOS and Android. The android implementation is buggier, though. My guess is that the underlying image has the callback bound on the click event, while all Kendo UI Mobile widgets use the touchend event. If this is so, you can try moving the callback to the touchend event, and see if the problem persists.

Regards,
Petyo
Telerik

[Michael]

Hi Petyo,

Thanks for the reply.

For the image we have, "...data-bind="click: onButton"..."

The modal uses, "...data-click="closeModal"..."

How would I implement the touchend event for the image?

Thanks

[Michael]

I think "...data-click="onButton"..." did the trick.

[Petyo]

Hello Michael,

I can confirm this approach. Another option would be something like data-bind="events: { touchend: onButton}".

Regards,
Petyo
Telerik

[Michael]

I added a few views, and made various seemingly unrelated modifications to the app and the approach I was using stopped working, actually. Your solution still works, though.