Thursday, August 23, 2012

jQuery mobile swipe event double firing

When I import jquery mobile latest js library and bind some div to swipeleft or swiperight event, I receive double events for every swipe. This is very frustrated as I need do some action on each swipe. After some google, there are couple of solutions.

Solution 1:
Change jquery mobile source code - add return false in $.event.special.swipe

Solution 2:
Use the on() method with event.stopImmediatePropagation() to stop the double bubble
$(function(){   
    $('somediv').on('swipeleft swiperight',function(e, data){
              e.stopImmediatePropagation();
    });
});

Solution 3:
Bind the swipe event to documen
$(document).on('swipeleft',function(e, data){
        e.preventDefault();
});

Solution 4:
Find other libraries which has no such an issue like jquery.touchSwipe.js

I selected #4 solution because I want a lightweight js library for just swipe/touch events (btw, jquery mobile provides custom build), and I don't want HTML5 pushstate (which is enabled by default in jquery mobile)

No comments:

Post a Comment