ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである.在以前,一直一件事情困扰着我,那就是我想要试图触发元素内部的点击事件的时候,总是会触发外部元素的点击事件,拦也拦不住,直到今天,我了解了事件冒泡,我才大彻大悟。
简答
function fun2(e) {
e = e || window.event // window.event 用于兼容ie
window.event ? e.cancelBubble = true : e.stopPropagation()
console.log('ok1')
}
详解
举个例子
<div class="demo" onclick="fun1()">
<div class="inner-demo" onclick="fun2(event)">dddddddddddd</div>
</div>
function fun1() {
console.log('ok1')
}
function fun2(e) {
console.log('ok2')
}
每次点击内部元素区域inner-demo的事件fun2时候,就会触发demo的事件fun1.
这是因为事件冒泡------内部的事件被触发了之后,就会触发其父元素的同样的事件,然后接着触发父元素的父元素,以此类推,一直到最外层的window停止。就以上面的触发内部元素inner-demo为例把,打印事件的event对象之后,查看其path属性,就可以看到冒泡事件的路径
function fun2(e) {
console.log(e.path)
}
然后fun2方法被触发,紧接着fun1方法接着被触发。由于更高层没有点击事件,于是这个冒泡产生的连环事件就到此结束。
解决方法当然就是设定阻止冒泡的发生
function fun2(e) {
e = e || window.event // window.event 用于兼容ie
window.event ? e.cancelBubble = true : e.stopPropagation()
console.log('ok1')
}
这样就会阻止冒泡,内部的点击事件就不会散发到外部去。这个元素就被“隔离”起来了。
总结
事件冒泡还是相当重要的一个方法,建议熟记。