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

时间:2013-03-30 20:52:30

标签: jquery-mobile jquery swipe preventdefault

我正在使用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" );
      }
    }
  });
});

谢谢。

1 个答案:

答案 0 :(得分:11)

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

至于.selector,它可以是标记 #ID .class ,例如[data-role=page]#PageIDdiv.ui-content ...等

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