Geek Answers Handbook

Stop jQuery Mobile swipe event double bubbling

I have jQuery Mobile on iPad Safari, and for some reason, touch-swipe events fire twice.

People have reported the same issue in the past year as they did this week, but I can’t find an explanation of how to fix a double event without changing jQuery Mobile, and I don’t want to. JQuery forum topic

Binding snap elements for a napkin handler has the same incorrect double-event result when a warning is raised twice for each scroll.

How should jQuery Mobile touch events be connected 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!'); });
+7
source share
3 answers

event.stopImmediatePropagation () was a trick that is different than stopPropagation (). Providing the jQuery on () method is called in document.ready seems to help. I was able to use any selector element to bind events, including using swipeup and scrolling 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!'); }); });
+11
source

Well, if the same problem with the swipe event was called twice. A workaround is to bind the event this way:

 $(document).on('swipeleft', '#div_id', function(event){ //console.log("swipleft"+event); // code });
+3
source

It really helped in my case. I tried to scroll pages using mobile jquery, and swipe events (left and right) were fired several times. event.stopImmediatePropagation () worked like a charm. Thanks!!

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>
0
source

More articles:


All Articles