javascript - 带有点击事件的 stopPropagation()

Question

我正在使用hammer.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，问题似乎是一样的。如何使用其中一个库实现此结果？（如果需要，也可以另外一个）

score 8 · Accepted Answer

正如另一条评论中提到的那样，正如您所做的那样，人们会期望调用event.stopPropagation()将是阻止事件冒泡到父级所需要的全部。

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

解决方案？我相信这是锤子中的一个错误- 提交一个更正originalEvent点击事件中的拉取请求。正如其他人建议的那样，您可以检查事件的目标，但这始终是父元素 - 我认为这是另一个错误。所以改为检查event.originalEvent.target. 这是一个实现了这个平庸解决方案的JS fiddle ：http: //jsfiddle.net/HHRHR/

score 3 · Accepted Answer

由于无法完成这项工作，我使用了一个变量来了解子事件是否已被触发。它与 jGestures 配合得很好（我没有尝试过使用hammer.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');
});

</p>

score 3 · Accepted Answer

我对触摸事件也有类似的问题。

我通过使用解决了它

return false;

这与调用 e.preventDefault(); 相同；e.stopPropagation();

score 0 · Accepted Answer

如果你不能让它工作..只需在验证需要后在水龙头上调用另一个方法（这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
});

score 0 · Accepted Answer

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

javascript - 带有点击事件的 stopPropagation()

5 回答 5

Related

Reference