Quick tap

by cvalleskey

HTML

<span class="btn">Tap me</span>
<div id="debug"></div>

SCSS

body {
    padding: 2em;
}
.btn {
    display: block;
    padding: 1em;
    text-align: center;
    background: #333;
    color: #FFF;
    border-radius: 0.5em;
}

JavaScript

$(function() {
    $('.btn').on({
        touchstart : function(e) {
            debug('touchstart', e);
            e.preventDefault();
            $(this).data('tap-origin', e);
        },
        touchmove : function(e) {
            debug('touchmove', e);
            e.preventDefault();
            $(this).data('tap-move', e);
        },
        touchend : function(e) {
            var start = $(this).data('tap-origin');
            var end = $(this).data('tap-move');
            
            if(Math.abs(start.originalEvent.pageX - end.originalEvent.pageX) <= 10) {
                debug('touchsuccess', e);
                } else {
                debug('touchfail', e);
            }
            e.preventDefault();
        }
    });

    function debug(t,e) {
        $('#debug').text(t + ': ' + e.originalEvent.pageX + ' / ' + e.originalEvent.pageY);
        console.log(t, e.originalEvent.pageX, e.originalEvent.pageY, e);
    }
});