之前在JS事件---冒泡与捕获相关的记录(一)记录了cancelBubble和stopPropagation的一些区别.stopPropagation(阻止传播)在事件绑定时分为了两种情况。一种是事件从父级dom开始,向子孙dom传播.一种是事件从子孙dom开始,向父级dom传播.非事件绑定的事件触发默认,只是响应子孙dom向父级dom的事件传播.(如下面这种情况)
<div id="div1"> div1 <div id="div2">div2</div> </div>var oDiv1 = document.getElementById("div1"); var oDiv2 = document.getElementById("div2"); function fn1(ev){ alert(this.id+":fn1"); } function fn11(ev){ alert(this.id+":fn11"); } oDiv1.addEventListener("click",fn1,true); oDiv1.addEventListener("click",fn11,true); oDiv1.onclick = function(){ alert(this.id+":onclick"); } oDiv2.onclick = function(ev){ alert(this.id+":onclick"); }
---><---
点击div2后,先触发了div1的fn1事件,然后是div1的fn11事件.接着触发了div2的onclick,接着事件又冒泡执行了div1的onclick事件.
如果给div2加上阻止传播,将会阻止由内而外的冒泡传播,(如下面的修改)
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
function fn1(ev){
alert(this.id+":fn1");
}
function fn11(ev){
alert(this.id+":fn11");
}
oDiv1.addEventListener("click",fn1,true);
oDiv1.addEventListener("click",fn11,true);
oDiv1.onclick = function(){
alert(this.id+":onclick");
}
oDiv2.onclick = function(ev){
oEv.stopPropagation();//阻止div2的事件传播
alert(this.id+":onclick");
}
---><---
此时点击div2时,事件传播到div2上后就不再继续向外传播了.
我们再给父级div1的fn1函数加上阻止传播(如下面的修改)
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
function fn1(ev){
ev.stopPropagation(); //阻止传播
alert(this.id+":fn1");
}
function fn11(ev){
alert(this.id+":fn11");
}
oDiv1.addEventListener("click",fn1,true);
oDiv1.addEventListener("click",fn11,true);
oDiv1.onclick = function(){
alert(this.id+":onclick");
}
oDiv2.onclick = function(ev){
oEv.stopPropagation();
alert(this.id+":onclick");
}
---><---
此时点击div2时,事件执行到div1时就不继续向内传播了.但我们发现div1上绑定的两个事件都执行了.如果我们想让div1的fn1方法执行完毕后,不再执行div1上绑定的其它click函数,我们可以使用stopImmediatePropagation来替换stopPropagation.stopImmediatePropagation的意思是立即停止传播,包括同一dom的事件.
下面我们用stopImmediatePropagation替换stopPropagation(如下面的修改)
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
function fn1(ev){
ev.stopImmediatePropagation(); //立即阻止传播
alert(this.id+":fn1");
}
function fn11(ev){
alert(this.id+":fn11");
}
oDiv1.addEventListener("click",fn1,true);
oDiv1.addEventListener("click",fn11,true);
oDiv1.onclick = function(){
alert(this.id+":onclick");
}
oDiv2.onclick = function(ev){
oEv.stopPropagation();
alert(this.id+":onclick");
}
---><---
此时点击div2时,事件只执行到div1的fn1事件后就不再传播了.
经过这么一番折腾终于有点明白cancelBubble,stopPropagation,stopImmediatePropagation了.以上观点为个人观点和个人脑补的记录方式,欢迎交流指正 : )