swipeleft/swiperight triggered during vertical scroll in jQuery mobile

Question

Problem is that swipeleft/swiperight event is trigger when I want vertical scroll.

We are using jQuery mobile 1.1.0 version and jQuery 1.7.1.

and code is:

 $(document).delegate('#quizResumePage', 'swipeleft swiperight', function (event) {
   event.stopImmediatePropagation();
    if (event.type == 'swipeleft') {
       $('#btnnext').trigger('click');
    }  else  if (event.type == 'swiperight')  {
       $('#btnprevious').trigger('click');
    }
   event.preventDefault();
});

Then why swipe event trigger when I want to scroll the page?

This problem is occur in the Samsung galaxy android 2.3.5...

Can any one help me for this issue?

Answer 1

You can control how the swipe event works changing the values of the following object

$.extend($.event.special.swipe,{
  scrollSupressionThreshold: 10, // More than this horizontal displacement, and we will suppress scrolling.
  durationThreshold: 1000, // More time than this, and it isn't a swipe.
  horizontalDistanceThreshold: 30,  // Swipe horizontal displacement must be more than this.
  verticalDistanceThreshold: 75,  // Swipe vertical displacement must be less than this.
});

place it on your code before listening to the swipes. Change for example the verticalDistanceThreshold to 15 and the durationThreshold to 500 that will help to reduce the false positive.

On the other side, in your code you're triggering the click event on your buttons, while that works, a better approach would be to call directly the method that executes next/previous actions.

Good luck!