防止特定元素上的JQuery Mobile滑动事件

Question

我正在使用jquery mobile，并且需要防止特定元素上的滑动事件。这样做的需要是因为我正在使用滑块，我不希望刷新事件被调用。我希望在用户使用滑块进行操作时阻止它。我无法找到任何解决方案，所以我在这里寻求帮助。

这是我的javascript代码：

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

谢谢。

Answer 1

您需要同时使用stopPropagation();和preventDefault();。

至于.selector，它可以是一个标签和#ID或的.class，例如[data-role=page]#PageID，div.ui-content ...等

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

• 参考：stopPropagation();

• 参考：preventDefault();

• Working example