[JavaScript知识库] 如何阻止浏览器的默认行为?

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 如何阻止浏览器的默认行为? -> 正文阅读

[JavaScript知识库]如何阻止浏览器的默认行为?

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

什么是默认行为?

默认行为，就是不用我们注册，其本身就存在的事情
- 比如我们点击鼠标右键的时候，会自动弹出一个菜单
- 比如我们点击 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>