Prevent JQuery Mobile swipe event over specific element

问题:

I am using jquery mobile and I need to prevent swipe event over specific element. Need of doing this is because I am using slider and I don't want the swipe event to be invoked resp. I want it to be prevented when user is manipulating with slider. I was not able to too find any solution so I am asking for help here.

This is my javascript code:

$( document ).on( "pageinit", "#demo-page", function() {   $( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {    // We check if there is no open panel on the page because otherwise   // a swipe to close the left panel would also open the right panel (and v.v.).   // We do this by checking the data that the framework stores on the page element (panel: open).     if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {      if ( e.type === "swipeleft"  ) {         $( "#right-panel" ).panel( "open" );       } else if ( e.type === "swiperight" ) {            $( "#left-panel" ).panel( "open" );       }     }   }); }); 

Thank you.

回答1:

You need to use both, stopPropagation(); and preventDefault();.

As for the .selector, it can be a tag and #ID or .class, e.g. [data-role=page]#PageID , div.ui-content...etc

$(document).on('swipeleft swiperight', '.selector', function(event) {  event.stopPropagation();  event.preventDefault(); }); 

• Reference: stopPropagation();

• Reference: preventDefault();

• Working example

文章来源: Prevent JQuery Mobile swipe event over specific element