在与页面上的元素交互时阻止滑动事件 [英] Prevent Swipe events when interacting with elements on a page

问题描述

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

I am building an iPad application which is essentially a series of slides.

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

When I've finished reading a slide I am able to swipe to the next slide *(using Zepto's swipe) which changes the window.location to the next slide. (the swipe event is bound to the window.body as it needs to work on the whole page)...

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

Here is the problem: some slides have interactive elements such as buttons, draggable items etc. The problem is that the swipe event is triggered when using some of these interactive elements.

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

Does anyone know of a way to prevent swipe from triggering in these instances? Perhaps settings a sensitivity etc?

我很难过......

I'm stumped...

祝福，非常感谢！

推荐答案

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

The way Zepto manages touch events is it binds listeners to the touchstart, touchend, and touchmove events on document.body. It then performs calculations on what event to send and triggers an event on the element that received the touchstart event. This event then bubbles up through the DOM tree evoking the listeners of each element.

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

This gives us two ways of preventing swipe events:

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

First, you could do something like:

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

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

When your child element receives one a touch event, it will prevent it from propagating to parent elements, most importantly the body tag. This prevents the Zepto touch processor from doing anything, blocking swipe, tap, singleTap, longTap, and doubleTap events from occurring while operating in that element.

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

Because swipe events also bubble, you could also just prevent those specific events from bubbling to your element that listens to page change swipes:

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

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

This will allow you to still receive the Zepto generated events inside your child element but not outside. Zepto tap events will also still work for all elements within your child.

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

这篇关于在与页面上的元素交互时阻止滑动事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！