1、问题描述
今天在项目中遇到个问题,当父元素与子元素都定义了一个click事件时,点击子元素的同时也触发了父元素的事件。
代码大概如下:
<div id="div1">
<div id="div2"></div>
</div>
$('#div1').on('click', function(){
alert(1);
});
$('#div2').on('click', function(){
alert(2);
});
当点击div2时,执行结果:先弹出2,再弹出1。
2、涉及JS知识点
JS事件冒泡:当一个元素触发事件时,这个元素会把事件传递给它的父元素,一直传递到window级,父元素接收到事件后也会触发自己绑定的这个事件函数(注意:子元素只会传递事件,不会传递定义事件的函数,如果父元素没有对事件绑定函数,也就没有什么表现,但是事件确实是传递过去了)
3、解决方法
当点击div2时阻止事件冒泡,修改后代码:
$('#div1').on('click', function(){
alert(1);
});
$('#div2').on('click', function(e){
stopBubble(e);
alert(2);
});
/*阻止事件冒泡*/
function stopBubble(e) {
//如果提供了事件对象,则这是一个非IE浏览器
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则,我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
修改后执行结果:当点击div2时,先alert(2),由于阻止了事件传递给div1,所以div1没有执行它的click事件,问题解决。
本文参考了https://www.cnblogs.com/moqing/p/5590216.html,感谢“全凭一口仙气儿活着”,把js的事件冒泡解释得非常详细