布局代码
#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
js——事件冒泡与捕获小例子
原文地址：http://www.cnblogs.com/coolqiyu/p/7801028.html