zepto 阻止事件冒泡失效

事情是这样的:

html

<div class="div2"> 
      <div class="div1"></div>
</div>

js

$('body').on('click', '.div1', function(event) { 
     alert('a on c');
     event.stopPropagation();
 }); 
$('body').on('click', '.div2', function(event) { 
      alert('a on b');
 });

这种情况事件都绑定到了body上,当我单击div1的时候触发事件,但是我不想让div2上边的事件也触发,所以我要阻止事件冒泡。那么问题来了,不生效,div2上边的事件还是触发了。经过各种阻止事件冒泡的方法(return false; ),结果还是一样无效。
通过网络查询没有找到自己满意的答案。有一个网友说了一下方式:

$('.div1').on('click', function(event) { 
        alert('a on c'); 
        event.stopPropagation();
 }); 
$('.div2').on('click', function(event) { 
       alert('a on b');
 });

当这不是我想要的结果。在某些情况下,我必须把事件绑定到一个父级元素的形式。尤其是触发事件的元素是后来动态加载进来的。
后来特地用jQuery 也做了测试。jQuery 完全可以实现没有任何的问题.

jQuery源码

 stopPropagation: function() { 
        var e = this.originalEvent; 
        this.isPropagationStopped = returnTrue;
        if ( e && e.stopPropagation ) {
             e.stopPropagation();
        } 
}

Zepto源码

e = compatible(e);
if (e.isImmediatePropagationStopped()) return;
e.data = data;
var result = callback.apply(element, e._args == undefined ? [e] : [e].concat(e._args));
if (result === false) e.preventDefault(), e.stopPropagation();
return result

jQuery 源码还算看的懂,是要实现这个阻止冒泡,但是Zepto 这个就完全搞不懂了,所以在源码上找到问题的根源是破灭了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 5,563评论 2 10
  • jQuery基础 什么是JQ?一个优秀的JS库,大型开发必备JQ的好处?一简化JS的复杂操作二不再需要关心兼容性三...
    幺七阅读 4,489评论 0 2
  • 以前听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览器则是事件捕获。当...
    web蜗牛阅读 7,434评论 0 1
  • 第1章 鼠标事件 1-1 jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是...
    mo默22阅读 5,062评论 0 6
  • 夜已至,不觉眠 星空下 有神话,有信仰, 有楼宇,有灯光, 有能量,有树木,有雪人 却没有你。
    暑假作业阅读 1,517评论 0 2

友情链接更多精彩内容