- 默认情况下,多个事件处理函数会按照DOM事件流模型中的顺序执行。如果子元素上发生某个事件,不需要执行父元素上注册的事件处理函数,那么我们可以停止捕获和冒泡,避免没有意义的函数调用。前面提到的5种事件绑定方式,都可以实现阻止事件的传播。由于第5种方式,是最推荐的做法。所以我们基于第5种方式,看看如何阻止事件的传播行为。IE8以及以前可以通过 window.event.cancelBubble=true阻止事件的继续传播;IE9+/FF/Chrome通过event.stopPropagation()阻止事件的继续传播。
- // 目标
- outC.addEventListener('click',function(event){
- alert("target");
- event.stopPropagation();
- },false);
-
- // 事件冒泡
- outA.addEventListener('click',function(){alert("bubble");},false);
-
- // 事件捕获
- outA.addEventListener('click',function(){alert("capture");},true);
var a1 = document.getElementById("a1");
var a2 = document.getElementById("a2");
var a3 = document.getElementById("a3");
a3.onclick = function(){
console.log("a3") ;
event.stopPropagation()
}
a2.onclick = function(){
console.log("a2") ;
}
a1.onclick = function(){
console.log("a1") ;
}