<div id="id">
<p id="p"></p>
</div>
事件冒泡:
var btnId = document.getElementById("id");
var btnP = document.getElementById("p");
btnId.addEventListener("click",function(){
alert("后");
},false);
btnP.addEventListener("click",function(){
alert("先");
},false);
执行顺序:alert("先") 再alert("后")
事件捕获:
var btnId = document.getElementById("id");
var btnP = document.getElementById("p");
btnId.addEventListener("click",function(){
alert("后");
},false);
btnP.addEventListener("click",function(){
alert("先");
},false);
执行顺序:alert("后") 再alert("先")
以后阻止冒泡就用这个方法:
function stopEvent(event){
window.event? window.event.cancelBubble = true : event.stopPropagation(); //w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true
}
取消冒泡用这个:
function calceEvent(event){
window.event? window.event.cancelBubble = false : preventDefault(); //w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false;
}
html:
<div onclick="show2();">
<button onclick="show1(event)">
按钮
</button>
</div>
js: 在原生js中return false只能阻止默认行为,无法阻止冒泡事件
function stopEvent(event){
return false;
}
function show1(ev){
alert(1);
stopEvent(ev);
}
function show2(){
alert(2);
}
但是在jquery中,return false可以阻止默认行为,也可以阻止冒泡事件
$("#testC").on('click',function(){
return false;
});
1总结
作者:李斌
链接:https://zhuanlan.zhihu.com/p/31759394
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
总结使用方法当需要停止冒泡行为时,可以使用function stopBubble(e) {
//如果提供了事件对象,则这是一个非IE浏览器
if ( e && e.stopPropagation ) {
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
}else {
//否则,我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
当需要阻止默认行为时,可以使用//code from http://caibaojian.com/javascript-stoppropagation-preventdefault.html
//阻止浏览器的默认行为
function stopDefault( e ) {
//阻止默认浏览器动作(W3C)
if ( e && e.preventDefault ) {
e.preventDefault();
//IE中阻止函数器默认动作的方式
}else {
window.event.returnValue = false;
return false;
}
}