1、直接上代码
代码解释,将#btn的 点击事件 代理在body 上,因为btn是 动态加载的节点。
event.stopPropagation();
这个是 阻止事件冒泡,只让他执行自己的事件,不触发父组件的点击事件
event.stopImmediatePropagation();
这个是阻止 同一个元素上的 同类型事件,例如btn上绑定了 两个click事件,阻止下一个click事件的发生。
$('body').delegate('#btn','click', function(event){
event.stopPropagation();
event.stopImmediatePropagation();
alert("只执行一个事件,阻止事件冒泡!")
})
2、代理事件和 事件冒泡
近期遇到了一个bug ,点击删除按钮 先触发了 列表 的点击事件。 本以为是因为没有做 阻止事件冒泡!! 最后发现 :
因为都是动态加载的dom, 需要将 给btn 代理事件的 代码。写在给 list 代理前面。 因为 JS 是单线程的, 会先执行上面的代码-------先给list 代理事件,点击就会先触发 list的点击事件。