阻止浏览器默认事件

最新推荐文章于 2023-12-03 16:39:01 发布

HaiRong_21

最新推荐文章于 2023-12-03 16:39:01 发布

阅读量266

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/HaiRong_21/article/details/109246529

版权

本文介绍了如何使用`javascript:`伪协议和`event.preventDefault()`来阻止页面链接跳转及表单提交。通过示例代码展示了在不同场景下，如何有效地阻止浏览器的默认操作，包括`<a>`标签的点击事件和表单提交事件。这在前端开发中对于实现自定义交互逻辑至关重要。

摘要由CSDN通过智能技术生成

（1）跳转地址的值为：javascript:;
（2）event.preventDefault（）
（3）event.returnValue = false; //IE678阻止浏览器默认行为

<body>
    <a href="javascript:;">javascript:;阻止跳转</a>
    <hr>
    <a href="#" class="pa">preventDefault阻止</a>
    <hr>
    通过javascript:;阻止表单提交事件<br><br>
    <form action="javascript:;">
        <input type="text">
        <input type="submit">
    </form>
    <hr>
    通过preventDefault阻止<br><br>
    <form action="#">
        <input type="text">
        <input type="submit">
    </form>
    <script>
        let pa = document.querySelector('.pa');
        let secondform=document.forms[1];

        pa.onclick = function (event) {
            if (event) {
                event.preventDefault()
            } else {
                event = window.event;
                event.returnValue = false;//IE678阻止浏览器默认行为
            }
        }
        secondform.onsubmit=function(event){
            event.preventDefault()
        }
    </script>
</body>

HaiRong_21

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
阻止浏览器默认事件

（1）跳转地址的值为：javascript:;（2）event.preventDefault（）（3）event.returnValue = false; //IE678阻止浏览器默认行为<body> <a href="javascript:;">javascript:;阻止跳转</a> <hr> <a href="#" class="pa">preventDefault阻止</a> <hr
复制链接

扫一扫