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();
});

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

由于滑动事件也会冒泡，因此您也可以阻止这些特定事件冒泡到侦听页面更改滑动的元素：

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

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

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

Answer 2

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

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

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

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

2 个答案: