防止与网页上的元素进行交互时发生滑动事件

我正在构建一个基本上是一系列幻灯片的iPad应用程序。防止与网页上的元素进行交互时发生滑动事件

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

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

有谁知道在这些情况下防止刷卡触发的方法吗？也许设置敏感度等？

我难过...

祝你好运，万分感谢！

来源

2013-02-24 Chris

我相信滑动事件是从文档级事件中生成的。如果你的元素级触摸*事件调用'stopPropigation（）'，那应该防止产生滑动事件。 – 2013-02-24 18:27:01

你好伙伴对不起，在这里很厚 - 你能解释一个白痴（我！）:)我很努力去理解...... – Chris 2013-02-24 18:30:59

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

这给了我们防止滑动事件的方式有两种：

首先，你可以这样做：

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

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

因为刷卡事件也泡，你也只是防止起泡，以你的元素侦听页面变化的特定事件挥笔：

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

这将允许您仍然收到的Zepto内部产生的事件您子元素，但不在外面。 Zepto轻拍事件对您孩子中的所有元素仍然有效。

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

来源

2013-02-25 15:46:49

希望 “excludedElements” 的方法会帮助你，像下面。

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

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

来源

2016-11-10 12:50:08 Jaison

防止与网页上的元素进行交互时发生滑动事件

回答

相关问题