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

Posted 2023-05-09

【中文标题】在某些元素上取消后台滑动处理程序

【英文标题】：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：谢谢，但现在它根本不起作用（也没有错误）

【参考方案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，而不是我自己的代码。还是我错过了什么？