stopPropagation() with tap event

stopPropagation() with tap event

本文关键字：tap event with stopPropagation      更新时间：2023-09-26

我正在使用锤子.js看来我event.stopPropagation()不适用于点击事件。

如果我单击子项，则会触发关联的事件，但也会触发父级的事件，我不希望这样。

$('#parent').hammer().bind('tap', function(e) {
    $(this).css('background', 'red');
});​​​​​​​​
$('#child').hammer().bind('tap', function(e) {
    e.stopPropagation();
    $(this).css('background', 'blue');
});

下面是一个示例：http://jsfiddle.net/Mt9gV/

我也尝试了jGestures，问题似乎是一样的。如何使用其中一个库实现此结果？（如果需要，也可以再用一个）

正如另一条评论中提到的，人们会像您一样期望调用event.stopPropagation()就可以阻止事件冒泡到父级。

细节：然而，在Hammer中.js情况并非如此。 Hammer 为您调用 $(el).hammer() 的每个元素创建一个新的手势状态机。 因此，当浏览器在子级上触发触摸事件时，它首先由子级的逻辑处理，然后再次由父级上的逻辑处理。 因此，若要阻止父级获取点击事件，必须阻止父级的锤子状态机获取原始触摸事件。 通常，调用event.stopPropagation()也会停止原始事件的传播。 但是，hammer.js 的 tap 事件在 touchend 上触发，但originalEvent是缓存的touchstart事件。 因此，停止对原始事件的传播没有任何影响，因为touchstart事件很久以前就通过 DOM 冒泡了。

溶液？我相信这是 hammer 中的一个错误 - 提交一个拉取请求来纠正 tap 事件中的originalEvent。 正如其他人建议的那样，您可以检查事件的目标，但这始终是父元素 - 在我看来是另一个错误。 因此，请改为检查event.originalEvent.target。 这是实现这个平庸解决方案的JS小提琴：http://jsfiddle.net/HHRHR/

由于我无法完成这项工作，因此我使用了一个变量来了解子事件是否已触发。它与jGestures配合得很好（我没有尝试过锤子.js）

var childTriggered = false;
$('#child').bind('tapone', function(e) {
    $(this).css('background', 'red');
    childTriggered = true;
});
$('#parent').bind('tapone', function(e) {
    if(childTriggered) {
        childTriggered = false;
        return;                
    }
    $(this).css('background', 'blue');
});

​

我在触摸事件方面遇到了类似的问题。

我通过使用解决了它 

return false;

这与调用相同 e.preventDefault（）; e.stopPropagation（）;

如果你不能让它工作.. 只需在验证需要后在水龙头上调用另一个方法（arguments.callee在这种情况下，我会从哪里开始），这将具有让其他用户钩住按钮的额外好处......

function myFn(a) { if(a) $(this).css('background', 'red'); else $(this).css('background', 'blue');} 

$('#parent').hammer().bind('tap', function(e) {
   //Check arguments.callee or other data in event and call myFn
});​​​​​​​​
$('#children').hammer().bind('tap', function(e) {
  //Same here
});

您可以尝试检查父处理程序中的e.currentTarget（或者是否e.target？）以找出点击了哪个元素; 如果是子元素，则立即返回，否则继续该函数。

相关文章：