<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.one {
background-color: red;
height: 500px;
}
.two {
background-color: #0000FF;
height: 300px;
}
.three {
background-color: yellow;
height: 200px;
}
</style>
</head>
<body>
<div class="one" onclick="doIt()">
<div class="two" onclick="doItTwo()">
<div class="three" onclick="doItThree()">
</div>
</div>
</div>
<script type="text/javascript">
function doIt(e) {
console.log(1)
stopBubble(e)
}
function doItTwo(e) {
console.log(2)
stopBubble(e)
}
function doItThree(e) {
console.log(3)
stopBubble(e)
}
function stopBubble(e) {
//如果提供了事件对象,则这是一个非IE浏览器
if (e && e.stopPropagation)
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则,我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
</script>
</body>
</html>