Disabling swipe on a specific div
13,589
Solution 1
.on('swipeleft swiperight', function(e){
as opposed to
.swipe(function(e){
While I'm not 100% confident in this answer, a feel trials revealed that there will still be issues with the code and you might have to do a sanity check in the original element, something like,
if($.inArray('full-width-slider', $.trim($(e.target).prop('id')).split(' ')) > -1){
//full with slider is the target, so return out
}
Solution 2
I think you're looking for this:
event.stopImmediatePropagation();
This should stop the swipe from bubbling.
Your code
$('#full-width-slider').swipe(function(e){
e.stopImmediatePropagation();
e.preventDefault();
});
Comments
-
Afonso Gomes over 1 year
Having this jQuery Mobile 1.9.1 code, to take care of showing side panels when the user swipes right or left...
$(document).on("pageinit",".ui-page",function(){ var $page=$(this); $page.on("swipeleft swiperight",function(e){ if($page.jqmData("panel")!=="open"){ if(e.type==="swiperight"){ $page.find("#menu").panel("open"); }else if(e.type==="swipeleft"){ $page.find("#menu2").panel("open"); } } }); });
This creates a problem when using an image slider with swiping capabilities. Inside the slider div when I swipe right it changes to the next photo and opens the panel...
I just tryed doing this:
$('#full-width-slider').swipe(function(e){ e.stopPropagation(); e.preventDefault(); });
but it doesn't work at all.
Is there any way to disable the jQuery Mobile native slide function inside the div #full-width-slider ?
Thanks in advance.