PreventGhostClick

PreventGhostClick.js

/**
 * Prevent click events after a touchend.
 * 
 * Inspired/copy-paste from this article of Google by Ryan Fioravanti
 * https://developers.google.com/mobile/articles/fast_buttons#ghost
 * 
 * USAGE: 
 * Prevent the click event for an certain element
 * ````
 *  PreventGhostClick(myElement);
 * ````
 * 
 * Prevent clicks on the whole document (not recommended!!) * 
 * ````
 *  PreventGhostClick(document);
 * ````
 * 
 */
(function(window, document, exportName) {
    var coordinates = [];
    var threshold = 25;
    var timeout = 2500;

    // no touch support
    if(!("ontouchstart" in window)) {
        window[exportName] = function(){};
        return;
    }

    /**
     * prevent clicks if they're in a registered XY region
     * @param {MouseEvent} ev
     */
    function preventGhostClick(ev) {
        for (var i = 0; i < coordinates.length; i++) {
            var x = coordinates[i][0];
            var y = coordinates[i][1];

            // within the range, so prevent the click
            if (Math.abs(ev.clientX - x) < threshold && Math.abs(ev.clientY - y) < threshold) {
                ev.stopPropagation();
                ev.preventDefault();
                break;
            }
        }
    }

    /**
     * reset the coordinates array
     */
    function resetCoordinates() {
        coordinates = [];
    }

    /**
     * remove the first coordinates set from the array
     */
    function popCoordinates() {
        coordinates.splice(0, 1);
    }

    /**
     * if it is an final touchend, we want to register it's place
     * @param {TouchEvent} ev
     */
    function registerCoordinates(ev) {
        // touchend is triggered on every releasing finger
        // changed touches always contain the removed touches on a touchend
        // the touches object might contain these also at some browsers (firefox os)
        // so touches - changedTouches will be 0 or lower, like -1, on the final touchend
        if(ev.touches.length - ev.changedTouches.length <= 0) {
            var touch = ev.changedTouches[0];
            coordinates.push([touch.clientX, touch.clientY]);

            setTimeout(popCoordinates, timeout);
        }
    }

    /**
     * prevent click events for the given element
     * @param {EventTarget} el
     */
    window[exportName] = function(el) {
        el.addEventListener("touchstart", resetCoordinates, true);
        el.addEventListener("touchend", registerCoordinates, true);
    };

    document.addEventListener("click", preventGhostClick, true);
})(window, document, 'PreventGhostClick');