stopPropagation()与tap事件

Question

我正在使用hammer.js,似乎我event.stopPropagation()不使用tap事件.

如果我单击该子项,则会触发相关事件,但也会触发父事件,我不希望这样.

$('#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小提琴实现这个平庸的解决方案:http://jsfiddle.net/HHRHR/