javascript – stopPropagation()与tap事件

我使用 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/

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...