在某些元素上取消后台滑动处理程序答案

【问题标题】：Background swipe handler to be cancelled on certain elements在某些元素上取消后台滑动处理程序
【发布时间】：2014-03-25 12:08:57
【问题描述】：

我的网站上有此代码，因此您可以使用滑动返回/前进

$(function() {
  $(window).on("swipeleft", jqmForward)
           .on("swiperight", jqmBack);
});

问题是，当您尝试在已经有自己的滑动处理程序（例如 3rd-party 幻灯片库）上滑动时，它也会后退/前进

如何让它只在“后台”工作（忽略某些具有自己的滑动处理程序的元素）？

编辑： 简化了上面的代码，我尝试了这个但不起作用（可能是因为我将它添加到窗口而不是单个 div）

$('.swiper-wrapper').off();

【问题讨论】：

$(window).not("skipThis").on(swipeleft, ....
@Omar：谢谢，但现在它根本不起作用（也没有错误）

标签： jquery events jquery-mobile

【解决方案1】：

我最终得到了一个全局变量 allowGlobalSwipe 并使用 Swiper API 动态禁用它。

var allowGlobalSwipe = true; // <--

$(function() {
  $(window).on("swiperight", jqmBack);

  $('#slideContainer').swiper({
    onTouchStart: function () { allowGlobalSwipe = false; },   // <--
    onTouchEnd: function () { allowGlobalSwipe = true; }
  });
});

function jqmBack(e) {
  if (!allowGlobalSwipe) return;  // <--

  var prevpage = $('div.ui-page-active').prevAll('div[data-role="page"]');
  if (prevpage.length > 0)
    $.mobile.changePage($(prevpage[0]), { transition: "slide", reverse: true }, true, true);
}

【讨论】：

您已经实现了自己的方法来阻止事件传播，但已经存在一种方法。您应该能够选择您不想激活全局滑动的元素并停止touchmove:$([some elements]).on("touchmove", function (event) {event.stopPropagation();}) 的传播。其他相关事件为touchstart 和touchend。
但我使用的是 Swiper，而不是我自己的代码。还是我错过了什么？