JQuery Mobile Swipe-Ereignis über ein bestimmtes Element verhindern

Question

Ich verwende jquery mobile und muss Swipe-Ereignis über ein bestimmtes Element verhindern. Das muss ich tun, weil ich den Slider benutze und nicht möchte, dass das Swipe Event aufgerufen wird. Ich möchte, dass es verhindert wird, wenn der Benutzer mit dem Schieberegler manipuliert. Ich konnte keine Lösung finden, deshalb bitte ich um Hilfe.

Dies ist mein 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"); 
     } 
    } 
    }); 
}); 

Danke.

Answer 1

Sie müssen beide, stopPropagation(); und preventDefault(); verwenden.

Was die .selector, kann es ein tag und #ID oder .class- sein, z.B. [data-role=page]#PageID, div.ui-content ... etc

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

• Referenz: stopPropagation();

• Referenz: preventDefault();

• Working example