在 jquery mobile 中使用弹出窗口时禁用滑动事件

Question

我的应用程序具有向左滑动和向右滑动的功能，可以调出导航菜单。代码如下所示。

$(document).on("swipeleft swiperight", function(swipeEvent) {
   //my code here
}

在应用程序的页面中，我使用jquery mobile popup 来显示图像。我遇到的问题是 swipeleft 和 swiperight 仍然在弹出窗口内工作，并在后台显示导航栏，我不想要这个。

我在弹出窗口小部件上使用了 data-dismissible="false" 但这没有帮助。

你认为我应该如何解决这个问题？

Answer 1

使用 event.stopPropagation();为我工作。

我在弹出 div 上添加了 swipeleft 和 swiperight 处理程序并使用了 event.stopPropagation();在里面。

    $('#mypopup').on('swipeleft swiperight', function(event) {
        event.stopPropagation();
    });

Answer 2

您可以将函数绑定到 popupcreate 事件 (http://api.jquerymobile.com/popup/#event-create)，该事件会使 swipeleft swiperight 功能无效。一种方法是让 popupcreate 将全局变量更新为 true，然后让您的 .on(swipeleft,swiperight) 在执行任何操作之前检查该变量的值。然后您可以在 popupafterclose 事件中将其设置为 false。