jquery - 禁用在特定 div 上的滑动

Question

拥有这个 jQuery Mobile 1.9.1 代码，可以在用户向右或向左滑动时处理显示侧面板......

$(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");
            }
        }
    });
});

这在使用具有滑动功能的图像滑块时会产生问题。当我向右滑动时，在滑块 div 内它会变为下一张照片并打开面板......

我只是尝试这样做：

    $('#full-width-slider').swipe(function(e){
        e.stopPropagation();
        e.preventDefault();
    });

但它根本不起作用。

有什么方法可以禁用 div #full-width-slider 中的 jQuery Mobile 原生幻灯片功能？

提前致谢。

Answer 1

.on('swipeleft swiperight', function(e){

与

.swipe(function(e){

虽然我对这个答案不是 100% 有信心，但感觉试验表明代码仍然存在问题，您可能需要对原始元素进行完整性检查，例如，

if($.inArray('full-width-slider', $.trim($(e.target).prop('id')).split(' ')) > -1){
    //full with slider is the target, so return out 
}

Answer 2

我想你正在寻找这个：

event.stopImmediatePropagation();

这应该阻止滑动冒泡。

你的代码

$('#full-width-slider').swipe(function(e){
    e.stopImmediatePropagation();
    e.preventDefault();
});