Anyone who has experience developing web applications on mobile devices will have no doubt encountered the 300ms delay when firing
A common technique when dealing with
click events in dynamic content is to use event delegation to capture events bubbling up through the DOM. This same technique can be applied to touch events, although it is a little more difficult since there are at least four different events to capture;
Here’s a very basic example of how to capture a simulated ‘tap’ event:
Notice here it is useful to make use of
touchmove to detect any finger dragging gestures that might occur after a
touchstart has fired. This way it is easy to cancel the ‘tap’ on
touchend if desired.
Update: Originally this article was using the function
document.elementFromPoint(x,y) to get the element target in
ontouchend. A few people have kindly pointed out that you can actually just use
e.changedTouches.target or even
e.target to get the same result for a simple ‘tap’. It should be noted however, that the target in this case always refers to the originating element, so if you do need to reference an element a finger might have moved on/off during
touchend, you would still need to use:
Life would be so much easier if we had a native ‘tap’ event in mobile browsers!
Scroll to top