Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Event delegation for JavaScript 'tap' events
var tapArea, moved, startX, startY;
tapArea = document.querySelector('#list'); //the area you want to capture taps
moved = false; //flags if the finger has moved once touchstart has fired
startX = 0; //starting x coordinate
startY = 0; //starting y coordinate
//capture touchstart
tapArea.ontouchstart = function(e) {
e.stopPropagation();
moved = false;
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
};
//capture touchmove
tapArea.ontouchmove = function(e) {
//if the finger moves more than 10px flag to cancel the tap
//http://code.google.com/mobile/articles/fast_buttons.html
if (Math.abs(e.touches[0].clientX - startX) > 10 ||
Math.abs(e.touches[0].clientY - startY) > 10) {
moved = true;
}
};
//capture touchend
tapArea.ontouchend = function(e) {
e.preventDefault();
e.stopPropagation();
//get element from touch point
var element = document.elementFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
//if the element is a text node, get its parent.
if (element.nodeType === 3) {
element = element.parentNode;
}
if (!moved) {
//check for the element type you want to capture
if (element.tagName.toLowerCase() === 'label') {
alert('tap');
}
}
};
//don't forget about touchcancel!
tapArea.ontouchcancel = function(e) {
//reset variables
moved = false;
startX = 0;
startY = 0;
};
@alexgibson
Owner

Zing! :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.