javascript - 与页面上的元素交互时防止滑动事件

Question

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

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

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

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

我被难住了...

最良好的祝愿，非常感谢！！

Answer 1

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

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

首先，您可以执行以下操作：

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

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

因为滑动事件也会冒泡，所以您也可以阻止这些特定事件冒泡到您的元素来监听页面更改滑动：

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

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

在这里小提琴：http: //jsfiddle.net/bnickel/dUuUd/

Answer 2

希望“excludedElements”方法对您有所帮助，如下所示。

    $(".block").swipe({
    swipe: function (event, direction, distance, duration, fingerCount, fingerData) {

    },
    excludedElements: ".link, a",
    threshold: 0
});