在与页面上的元素交互时阻止滑动事件

Prevent Swipe events when interacting with elements on a page

本文关键字：事件 交互 元素      更新时间：2023-09-26

我正在构建一个iPad应用程序，它本质上是一系列幻灯片。

当我读完一张幻灯片后，我可以滑动到下一张幻灯片*(使用Zepto的滑动(，这会将窗口的位置更改为下一张。(滑动事件绑定到window.body，因为它需要在整个页面上工作(。。。

问题是：有些幻灯片具有交互式元素，如按钮、可拖动项目等。问题是，当使用其中一些交互式元素时，会触发滑动事件。

有人知道在这种情况下防止触发滑动的方法吗？也许设置了灵敏度等？

我被难住了。。。

致以最良好的祝愿和衷心的感谢！！

Zepto管理触摸事件的方式是将侦听器绑定到document.body上的touchstart、touchend和touchmove事件。然后，它对要发送的事件执行计算，并在接收touchstart事件的元素上触发事件。然后，这个事件在DOM树中冒出来，唤起每个元素的侦听器。

这为我们提供了两种防止滑动事件的方法：

首先，你可以做一些类似的事情：

$('#my-child-element').bind('touchstart touchend touchup', function(event) {
    event.stopPropagation();
});

当您的子元素接收到一个触摸事件时，它将阻止它传播到父元素，最重要的是body标记。这可以防止Zepto触摸处理器执行任何操作，阻止在该元素中操作时发生滑动、点击、单点点击、长点点击和双击事件。

因为滑动事件也会冒泡，所以你也可以防止那些特定的事件冒泡到你的元素中，听页面更改滑动：

$('#my-child-element').bind('swipeLeft swipeRight', function(event) {
    event.stopPropagation();
});

这将允许您仍然在子元素内部而不是外部接收Zepto生成的事件。Zepto tap事件仍然适用于您孩子体内的所有元素。

Fiddle here：http://jsfiddle.net/bnickel/dUuUd/

希望"excludedElements"方法能帮助您，如下所示。

    $(".block").swipe({
    swipe: function (event, direction, distance, duration, fingerCount, fingerData) {
    },
    excludedElements: ".link, a",
    threshold: 0
});
相关文章：