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

【问题标题】：Prevent Swipe events when interacting with elements on a page与页面上的元素交互时防止滑动事件
【发布时间】：2013-02-09 20:55:12
【问题描述】：

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

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

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

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

我被难住了......

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

【问题讨论】：

我相信滑动事件是从文档级别的事件中生成的。如果您的元素级触摸* 事件调用 stopPropigation()，那应该会阻止生成滑动事件。
嗨，伙计，很抱歉在这里很厚-你能为一个白痴（我！）解释一下吗：）我很难理解......

标签： javascript ios touch zepto

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

Zepto 管理触摸事件的方式是将侦听器绑定到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 点击事件也仍然适用于您孩子的所有元素。

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

【讨论】：