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

Question

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

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

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

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

我很难过...

最良好的祝愿和非常感谢!

Answer 1

Zepto 管理触摸事件的方式是将监听器绑定(bind)到 document.body 上的 touchstart、touchend 和 touchmove 事件。然后，它计算要发送的事件并在接收到 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 点击事件也仍然适用于您 child 中的所有元素。

在这里 fiddle :http://jsfiddle.net/bnickel/dUuUd/