Prevent Ghost Click - Hammer JS dynamic elements

458 Views Asked by At

I have an empty container div which is dynamically filled with a bunch of divs:

<div class="tile-container">
    <div class="tile tile-position-1-1">3</div>
    <div class="tile tile-position-1-2">2</div>
    <div class="tile tile-position-1-3">1</div>
</div>

I am using Hammer jQuery plugin to detect swipe in all directions. This is working on desktop with mouse swipes but when testing on mobile device it is not picking up the swipe.

Any ideas why it's not working on mobile devices?

var hammertime = $('.tile-container').hammer({prevent_default:true, domEvents:true});
$('.tile-container').data("hammer").get('swipe').set({ direction: Hammer.DIRECTION_ALL, threshold: 0 });
    hammertime.on("swipeleft swiperight swipeup swipedown", ".tile", function(ev) {
    PreventGhostClick('.tile-container');
    ev.originalEvent.gesture.srcEvent.preventDefault();
    var classIndex = $.grep($(this).attr('class').split(' '), function(v, i) {
            return v.indexOf("tile-position") === 0;
        }).join();
    alert(ev.type + " " + classIndex); 
});
0

There are 0 best solutions below