[js] 阻止默认事件 preventDefault()

最新推荐文章于 2024-06-24 15:18:03 发布

533_

最新推荐文章于 2024-06-24 15:18:03 发布

阅读量234

点赞数

分类专栏： # js 文章标签： javascript

本文链接：https://blog.csdn.net/qq_14993591/article/details/120208057

版权

js 专栏收录该内容

158 篇文章 2 订阅

订阅专栏

这篇博客探讨了如何使用JavaScript阻止HTML元素的默认行为，包括a标签的点击跳转、鼠标右键菜单以及form表单的提交。通过addEventListener添加事件监听器，并调用event.preventDefault()方法可以有效地阻止这些默认操作，实现更精细的交互控制。

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

1, a标签的点击效果
2, 鼠标右键弹出菜单
3, form标签点击提交

<a href="https://www.baidu.com">百度</a>

<form action="./01_复习.html">
     <button type="submit">提交</button>
</form>

阻止超链接的点击效果


        var oA = document.querySelector('a');
        oA.addEventListener( 'click' , function(event){
            console.log(111);

            // 阻止 超链接的默认 点击效果
            // 顺序无所谓 只要写了 就能阻止
            event.preventDefault();
        })

阻止鼠标右键的点击效果

        document.addEventListener( 'contextmenu' , function(event){
            event.preventDefault();
            console.log(2222);
        })

阻止 form标签点击效果

        // 点击button标签 本质是 触发了 form标签的 提交效果
        var oForm = document.querySelector('form');
        oForm.addEventListener( 'submit' , function(event){
            event.preventDefault();
            console.log(4444);
        })