<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{padding: 50px;}
#div1{background: blue;}
#div2{background: brown;}
#div3{background: orange;}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementsByTagName('div');
/*
当点击div1时
打印：div1
当点击div2时
打印： div2
div1
当点击div3时
打印 div3
div2
div1
*/
for(var i = 0; i < oDiv.length; i++) {
oDiv[i].onclick = function(ev) {
console.log(this.id);
// 阻止事件冒泡，但有的浏览器不兼容
// e.cancelBubble;
// e.stopPropagation();
var e = ev || window.target;
// e.cancelBubble;
// e.stopPropagation();
stopBubble(e);
}
}
// 阻止事件冒泡兼容写法
function stopBubble(e) {
if (!e.cancelBubble) {
e.stopPropagation();
} else {
e.cancelBubble;
}
}
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>
