js中的event.stopPropagation()阻止冒泡用法和event.preventDefault()用法

原创于 2020-09-09 11:10:04 发布 · 922 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

31 篇文章

订阅专栏

本文深入解析JavaScript中event.preventDefault()和event.stopPropagation()的功能与用法。preventDefault()用于阻止元素的默认行为，如点击链接不跳转；stopPropagation()则阻止事件冒泡，使事件不向上级元素传播。文章通过实例演示了如何在不同浏览器环境下兼容地使用这两个方法。

event.preventDefault()的作用是阻止一些默认的行为，比如点击链接不会跳到对应的地址；

var link = document.getElementById('myLink');
link.onclick = function(event){
    event.preventDefault();
}

event.stopPropagation()的作用是阻止事件冒泡；

var btn = document.getElementById('myBtn');
document.onclick = function(){
    alert(1);
}
btn.onclick = function(event){
    event.stopPropagation();
}

这样当点击btn时，绑定在document的事件不会被触发，因为btn的事件冒泡机制被组织了。

兼容IE

if (event.stopPropagation){  
    event.stopPropagation();  
}else{  
    event.cancelBubble=true;  
}  

if (event.preventDefault){  
  event.preventDefault();  
}else{  
   event.returnValue=false;  
}