JSFiddle - React, Tailwind, and code Playground

by aldomatic

HTML

<a href="#" id="tapMe">Tap Me!</a>

JavaScript

var tapArea, moved, startX, startY;

tapArea = document.getElementById('tapMe'); //the element to delegate
moved = false; //flags if the finger has moved
startX = 0; //starting x coordinate
startY = 0; //starting y coordinate

//touchstart            
tapArea.ontouchstart = function(e) {
    moved = false;
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
    alert('started');
};
//touchmove            
tapArea.ontouchmove = function(e) {
        //if the finger moves more than 10px flag to cancel the tap
        //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;
      }
};
//touchend
tapArea.ontouchend = function(e) {
    e.preventDefault();
        //get element from touch point
    var element = e.changedTouches[0].target;

        //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;
};

tapArea.onclick = function(e){
     e.preventDefault(); 
    alert("clicked");   
}