JS 阻止事件的冒泡 - Kaiqisan

ヤッハロー、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')
}

这样就会阻止冒泡，内部的点击事件就不会散发到外部去。这个元素就被“隔离”起来了。

总结

事件冒泡还是相当重要的一个方法，建议熟记。