JS阻止默认行为_js停止默认行为-优快云博客

本文链接：https://blog.youkuaiyun.com/wang_swa99er/article/details/120200833

本文详细讲解了如何使用JavaScript的w3c标准方法(e.preventDefault())和IE兼容版本(e.returnValue=false)来阻止超链接的默认跳转行为，并对比了两种方式的优劣。通过实例演示，确保了阻止行为的同时不影响后续操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS阻止默认行为

例：阻止超链接的的默认行为

1、简陋的阻止：a连接的默认行为的方式
     缺点：运行到了return，后续的内容我们就不执行了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
       window.onload = function(){
           var a1 = document.getElementById("a1");
           a1.onclick = function(){
                return false;
                return confirm("你确定要离开当前页面吗？");
           }
       }
    </script>
</head>
<body>
    <a id = "a1" href="https://www.baidu.com">百度</a>
</body>
</html>

运行结果：
在这里插入图片描述
分析：
虽然return false可以实现超链接阻止默认行为的效果，但是return false后面的代码将不被执行

2、规范的方法：w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
       window.onload = function(){
           var a1 = document.getElementById("a1");
           a1.onclick = function(ev){
               var e = ev || window.event;
               preDef(e);
               alert("后续操作");
           } 
       }

      //跨浏览器的阻止超链接的默认行为的函数
      function preDef(e){
        if(e.preventDefault){
            e.preventDefault();
        }else{
            window.event.returnValue = false;
        }
      }
    </script>
</head>
<body>
    <a id = "a1" href="https://www.baidu.com">百度</a>
</body>
</html>