Disabling swipe on a specific div

问题

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.

回答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 
}

回答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();
});

来源：https://stackoverflow.com/questions/16180498/disabling-swipe-on-a-specific-div