先看一段代码，猜猜输出结果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="id1" style=" 200px;height:200px;border: 1px solid #888;"> ggggg </div> <script type="text/javascript"> var obj1=document.getElementById('id1'); obj1.addEventListener('click',function(e){curClick('1');stopPropagation(e)},false); obj1.addEventListener('click',function(e){curClick('2');stopPropagation(e)},true); obj1.addEventListener('click',function(e){curClick('3');stopPropagation(e)},true); obj1.addEventListener('click',function(e){curClick('4');stopPropagation(e)},false); function curClick(id){ alert(id); } function stopPropagation(e){ // return var e = window.event || event; if(e.stopPropagation) { //W3C阻止冒泡方法 e.stopPropagation(); } else { e.cancelBubble = true; //IE阻止冒泡方法 } } </script> </body> </html>
无论stopPropagation函数里是否反注释return，结果顺序都是1 2 3 4。为什么会这样，与捕获和冒泡的关系呢？先说结论，直接点击同一个DOM，是处于目标阶段了，和捕获与冒泡无关了。可以看看这篇文章 你真的理解事件冒泡和事件捕获吗？
后面有三个问题，尤其是后两个，可以使你更深入理解这些概念：“需要注意的是，如果你还不明白为什么在c上触发的先是c1再是c2的话，那么你就需要在去看看第二个问题所描述的内容了”。