布局代码
#outer{
width: 300px;
height: 300px;
background: red;
}
#inner{
width: 200px;
height: 200px;
background: green;
}
<div id="outer">
<div id="inner"></div>
</div>
js测试代码
var inner = document.getElementById("inner");
var outer = document.getElementById("outer");
inner.addEventListener("click", function(e){
alert("inner");
}, true);
outer.addEventListener("click", function(e){
alert("outer");
}, true);
document.addEventListener("click", function(e){
alert("document");
}, true);
鼠标点击下图绿色部分，addEventListener最后一个参数的设置(是否用capture)：
- true捕获，依次出现：document—>outer—>inner
- false冒泡，依次出现：innert—>outer—>document