Touch and Gesture Events

Aria Templates allows the following Touch and Gesture Events touchstart, touchmove, touchend, tap, swipe

The simple way to add the above events on a div is as follows

TouchStart Sample Usage

TouchMove Sample Usage

TouchEnd Sample Usage

Tap Sample Usage

Swipe Sample Usage

Click Buster

Aria Templates implements a click buster strategy to avoid the side effects of ghost clicks. Safetap event permits to handle the tap gesture without any side effects due to the ghost click, generated by the browsers in mobile devices. If a mousedown, click or touchend event is detected after a safetap on the same area, it is ignored since it is considered as a ghost click: preventDefault() and stopPropagation() are called. In this way, if the DOM changes after the safetap event is handled, the mobile browser's ghost click will not have effects.

In the sample below you can notice the differences in using tap or safetap, in a mobile browser (and the side effects of the ghost click when safetap is not handled):