Stop jQuery Mobile swipe event double bubbling - ios

Question

I have jQuery Mobile on iPad Safari and for some reason touch swipe events are firing twice.
People have reported the same problem over the past year as recently as this week but I cannot find an explanation for how to fix the double event without modifying jQuery Mobile and I do not want to do that. Thread on jQuery forums
The follwoing element bindings for the swipe handler all have the same incorrect double-event result where the alert is called twice for every one swipe.
How should jQuery Mobile touch events be bound in order to avoid double bubbling?
// Test 1: Binding directly to document with delegate()
$(document).delegate(document, 'swipeleft swiperight', function (event) {
alert('You just ' + event.type + 'ed!');
});
// Test 2: Binding to document with on() handler recommended as of 1.7 with and without preventDefault
$(document).on('swipeleft',function(event, data){
event.preventDefault();
alert('You just ' + event.type + 'ed!');
});
// Test 3: Binding to body with on() with and without event.stopPropagation
$('body').on('swipeleft',function(event, data){
event.stopPropagation();
alert('You just ' + event.type + 'ed!');
});
// Test 4: Binding to div by class
$('.container').on('swipeleft',function(event, data){
event.stopPropagation();
alert('You just ' + event.type + 'ed!');
});

Answer 1

event.stopImmediatePropagation() was the trick, which is different from stopPropagation(). Ensuring the jQuery on() method is called in document.ready seems to help. I was able to use any element selector to bind the events including using the swipeup and swipe down from here
$(document).ready(function(){
$(document).on('swipeleft swiperight swipedown swipeup',function(event, data){
event.stopImmediatePropagation();
console.log('(document).Stop prop: You just ' + event.type + 'ed!');
});
});

Answer 2

Well, had the same problem with swipe event been called twice.
The workaround is to bind the event this way:
$(document).on('swipeleft', '#div_id', function(event){
//console.log("swipleft"+event);
// code
});

Answer 3

it really helped in my case too. I was trying to swipe pages with mobile jquery and swipe events( left and right ) were triggering several times. event.stopImmediatePropagation() it worked like a charm. Thank you !!
here is my code.
<script type="text/javascript">
$(document).bind( 'pageinit', function(event) {
$("div:jqmData(role='page')").live('swipeleft swiperight',function(event){
if (event.type == 'swipeleft') {
var prev = $(this).prev("div:jqmData(role='page')");
if(typeof(prev.data('url')) !='undefined') {
$.mobile.changePage(prev.data('url'), { transition: 'slide', reverse: false});
event.stopImmediatePropagation();
}
}
if (event.type == 'swiperight') {
var next = $(this).next("div:jqmData(role='page')");
if(typeof(next.data('url')) != 'undefined') {
$.mobile.changePage(next.data('url'), { transition: 'slide', reverse: false});
event.stopImmediatePropagation();
}
}
});
});
</script>
HTML -
<div data-role="page" id="page1" data-url="#page1">
<div data-role="content">
<div>
<h1> Page 1 </h1>
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called</p>
<ul data-role="listview" data-inset="true" data-theme="c">
<li>Swipe Right to view Page 2</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page2" data-url="#page2">
<div data-role="content">
<div>
<h1> Page 2 </h1>
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called</p>
<ul data-role="listview" data-inset="true" data-theme="c">
<li>Swipe Right to view Page 3</li>
</ul>
</div>
</div>
</div>