Prevent JQuery Mobile swipe event over specific element

Question

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.

Accepted Answer

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

Solution

Problem