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，问题似乎是一样的。如何使用其中一个库实现此结果？（如果需要的话，还是另一个）

Answer 1

正如另一条评论中所提到的，正如你所做的那样，人们会期望调用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/

Answer 2

由于我无法完成这项工作，我使用变量来了解子事件是否已被触发。它适用于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');
});

Answer 3

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

我使用

解决了这个问题

return false;

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

Answer 4

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

Answer 5

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

stopPropagation（）与tap事件

5 个答案: