防止特定元素上的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