JavaScript阻止浏览器默认事件发生

2020-06-08

字数统计: 242字 | 阅读时长: 1分钟

背景

在JavaScript Event中经常需要对事件进行阻止，主要有以下方法：
event.preventDefault()阻止浏览器默认事件。
event.stopPropagation()阻止元素事件冒泡。

一，event.preventDefault()

阻止浏览器默认行为

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("a").click(function(event){
        event.preventDefault();
        });
    });        //event.preventDefault() 方法将防止上面的链接打开 URL
    </script>
</head>
<body>
    <a href="http://w3school.com.cn/">W3School</a>
</body>
</html>

二，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;  
}