借用其他兄弟的成果扩展一下
<div id="id1" style="width:200px; height:200px; position:absolute; top:100px; left:100px; background-color:blue; z-index:4;border:1px solid #f00;">d1
<div id="id2" style="width:200px; height:200px; position:absolute; top:20px; left:70px; background-color:green; z-index:1;border:1px solid #f00;">d2
<div id="id3" style="width:200px; height:200px; position:absolute; top:20px; left:70px; background-color:red; z-index:1;border:1px solid #f00;">d3
</div>
</div>
</div>
这里采用了三个监听:
document.getElementById('id1').addEventListener('click', function() { console.log('id1==false');}, false);
document.getElementById('id2').addEventListener('click', function() { console.log('id2==false');}, false);
document.getElementById('id3').addEventListener('click', function() { console.log('id3==true');}, true);
关于第三个参数的设置以及最后冒泡的顺序问题,大致规律可以这么看,如果有更多的监听,那么首先将第三个参数为true的所有监听分为一组放在冒泡的前部,为false的放在后部,即,为true的先响应事件,为FALSE的后响应事件,为true的部分,按照从最外层到最里层的顺序响应,为false的部分按照从里层到外层的顺序响应,这就得到最后的响应顺序,如上例最后的结果是:d3,d2,d1