事件冒泡
下面用一个小例子来说一下对事件冒泡的理解。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡与阻止事件冒泡</title>
<style>
div{
width: 200px;
height: 200px;
background: green;
}
p{
width: 120px;
height: 120px;
background: yellow;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<script>
var oDiv = document.getElementsByTageName("div");
var oP = document.getElementsByTageName("p");
// 为元素绑定点击事件
oP.onclick = function() {
alert("p");
}
oDiv.onclick = function() {
alert("div");
}
document.body.onclick = function() {
alert("body");
}
document.onclick = function() {
alert("document");
}
</script>
</body>
</html>
上边这段代码共有四个事件，p,div,body,document分别绑定了点击事件。
点击p元素，会相继弹出四个提示框。这就是事件冒泡引起的现象。
事件冒泡的过程是：p -> div -> body -> document 。
原本只是想触发p元素的点击事件，可是它所有父级元素的点击事件也被相继触发了，这时我们需要阻止事件冒泡的发生。
阻止事件冒泡
如只想触发p元素的点击事件，只需在点击事件函数内部添加e.stopPropagation(); ，这样点击p元素就会只执行p元素的点击事件，而不会继续向下执行其父级元素的点击事件了。代码如下：
<script>
var oDiv = document.getElementsByTageName("div");
var oP = document.getElementsByTageName("p");
// 为元素绑定点击事件
oP.onclick = function(e) {
e.stopPropagation(); //添加e.stopPropagation(); 此时只会执行元素p的点击事件
alert("p");
}
oDiv.onclick = function() {
alert("div");
}
document.body.onclick = function() {
alert("body");
}
document.onclick = function() {
alert("document");
}
</script>
不过有一个问题，e.stopPropagation();只在高版本的非IE浏览器下有效，在IE浏览器是不支持的。IE浏览器支持的阻止事件冒泡是 e.cancelBubble 属性，只需将 e.cancelBubble 的值设置为true就可以了。
所以很多时候，为了解决兼容性问题，我们要将两者结合起来使用。代码如下：
<script>
oP.onclick = function(e) {
//三目运算符，如果浏览器有e.stopPropagation方法，用e.stopPropagation()，如果没有，用e.cancelBubble = true
e.stopPropagation?e.stopPropagation():e.cancelBubble = true;
alert("p");
}
oDiv.onclick = function() {
alert("div");
}
document.body.onclick = function() {
alert("body");
}
document.onclick = function() {
alert("document");
}
</script>