Detecting tap events on touch-enabled devices
There are various ways to detect a standard ‘tap’ gesture in JavaScript, this article presents a few of them.
jQuery Mobile has been able to detect these gestures for a while, tap.js is also available which handles both mouse clicks and tap events with the same event. I needed this functionality for one of the libraries I’m building only I didn’t want the mouse to trigger the event, so I created touchtap-event.js, a lightweight library that does just that.
It dispatches a custom touchtap
event if the positions where the touch started and ended were approximately the same and the time between them was <= 200ms. I’ve named the event touchtap
to make it distinct from tap
in tap.js and also to make it more consistent with the other touch*
events.
Here’s a usage example:
var elem = document.querySelector('#some-element');
elem.addEventListener('touchtap', function (e) {
console.log(e);
});