我使用
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,问题似乎是一样的.
如何用这些库之一来实现这个结果? (或另一个如果需要)
解决方法
如另一个评论中所提到的那样,像你一样,人们会期望,调用event.stopPropagation()将是阻止事件从冒泡到父级的所有要求.
细节:但是,在Hammer.js中,这不是这样的. Hammer为您调用$(el).hammer()的每个元素创建一个新的手势状态机.因此,当浏览器触发小孩触摸事件时,首先由孩子的逻辑进行处理,然后再由父母的逻辑进行处理.因此,阻止父母获取分接事件,您必须防止父母的锤状态机获取原始的触摸事件.通常,调用event.stopPropagation()也将停止原始事件的传播.但是,hammer.js的tap事件在touchend被触发,但originalEvent是缓存的touchstart事件.因此,原始事件的停止传播没有任何效果,因为touchstart事件早已通过DOM冒泡了.
解?我相信这是一个锤子中的错误 – 提交一个拉动请求,以纠正tap事件中的originalEvent.正如其他人建议你可以检查事件的目标,但总是父元素 – 我的意见的另一个错误.所以改为检查event.originalEvent.target.这是一个JS fiddle这个平庸的解决方案实施:http://jsfiddle.net/HHRHR/