如何阻止浏览器的默认行为?_浏览器默认行为-优快云博客

本文链接：https://blog.youkuaiyun.com/XVJINHUA954/article/details/124455413

本文介绍了如何阻止浏览器的默认行为，特别是针对a标签的点击事件。通过使用`e.preventDefault()`（非IE）和`e.returnValue=false`（IE）来实现阻止默认的链接跳转。示例代码展示了兼容性处理，使得在不同浏览器中都能阻止a标签的默认跳转行为。

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

如何阻止浏览器的默认行为?

什么是默认行为?

默认行为，就是不用我们注册，其本身就存在的事情
- 比如我们点击鼠标右键的时候，会自动弹出一个菜单
- 比如我们点击 a 标签的时候，我们不需要注册点击事件，他自己就会跳转页面
像这些不需要我们注册就能实现的事情，我们叫做默认事件

阻止默认行为

有的时候，我们不希望浏览器执行默认事件
- 比如我给 a 标签绑定了一个点击事件，我点击你的时候希望你能告诉我你的地址是什么，而不是直接跳转链接，那么我们就要把 a 标签原先的默认事件阻止，不让他执行默认事件

我们有两个方法来阻止默认事件

e.preventDefault() : 非 IE 使用
e.returnValue = false ：IE 使用

我们阻止默认事件的时候也要写一个兼容的写法

    var oA = document.querySelector('a')
    a.addEventListener('click', function (e) {
        e = e || window.event
        console.log(this.href)
        //下面这个是兼容写法
        e.preventDefault ? e.preventDefault() : e.returnValue = false
    })

实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            //抓取元素
            var a = document.getElementById("a");
            a.onclick = function (e) {
                //获得事件对象
                var e = e || window.event;
                //判断浏览器
                if (document.all) {
                    //阻止IE浏览器的默认行为
                    //阻止a标签跳转和from表单的提交
                    e.returnValue = false;
                } else {
                    //阻止非IE浏览器的默认行为
                    //阻止a标签跳转和from表单的提交
                    e.preventDefault()
                }
            }

        }
    </script>
</head>

<body>
    <a id="a" href="http://www.baidu.com">跳转百度</a>
    <a href="javascript:;">阻止a标签跳转</a>
    <a href="javascript:viod(0);">阻止a标签跳转</a>
</body>

</html>