2022-05-01[汇总]阻止浏览器默认行为的常见方法

前端OnTheRun

已于 2022-05-04 20:09:16 修改

阅读量869

点赞数

CC 4.0 BY-SA版权

分类专栏：知识点文章标签： js 浏览器默认行为前端 html

于 2022-05-01 22:45:53 首次发布

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/124533947

知识点专栏收录该内容

96 篇文章

订阅专栏

本文总结了阻止浏览器默认行为的常见方法，包括如何阻止a标签自动跳转，通过使用preventDefault()函数、点击事件中设置return=false，以及其他方式。此外，还介绍了阻止表单提交的方法，建议使用button代替submit来避免默认提交行为。

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

1.阻止a标签自动跳转

1.1.使用preventDefault()函数

    <a href="http://www.baidu.com" onclick="fn()">百度一下</a>

      function fn(eve) {
            var e = eve || window.event;
            // e.preventDefault();
            // 直接调用阻止函数
            stopEve(e);
        }
        //阻止函数的封装
        function stopEve(eve) {
            if (eve.preventDefault) eve.preventDefault();
            else eve.returnValue = false;//兼容IE
        }

1.2.点击事件中return=false

    <a href="http://www.baidu.com" id="one">百度一下</a>

        // 行内直接绑定
        // function fn() {
        //     return false; //没啥用
        // }
        //js动态绑定
        var aObj = document.getElementById("one");
        aObj.onclick = function fn() {
            return false;//常用
        }

1.3.其他

<!--如果a的href属性值中.协议名是javascript,那么点击a标签的时候,就会执行:后面的代码-->
    <a href="javascript:">不跳转</a>
    <a href="#none">也不会跳转</a>

2.阻止表单提交

不用submit,改用button即可