版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36818386/article/details/82226101
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#outer{
position: relative;
width:400px;
height: 400px;
background:yellow;
}
#inner{
position: absolute;
width:100px;
height: 100px;
background:cyan;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner"></div>
</div>
</body>
</html>
<script type="text/javascript">
var inner = document.getElementById("inner");
var outer = document.getElementById("outer");
inner.onclick = function (event)
{
var event = event||window.event;
//能力检测
if(event.stopPropagation)
{
//高级浏览器写法
event.stopPropagation();
}
else
{
//对于IE低级浏览器写法
event.cancelBubble = true;
}
console.log("inner");
}
outer.onclick = function (argument) {
console.log("outer");
}
</script>
