Login
网站首页 > 文章中心 > Js

e.preventdefault的用法介绍

作者:小编 更新时间:2023-08-21 18:27:21 浏览量:49人看过

e.preventDefault() 是在 JavaScript 事件处理程序中使用的方法,用于阻止事件的默认行为发生。通常在响应用户操作(如点击链接或提交表单)时使用,你可以使用它来覆盖与该事件关联的默认操作。

通过调用 e.preventDefault(),你可以停止事件的默认行为,例如跟随链接或提交表单,从而允许你执行自定义操作。

应用场景

1、防止表单提交

    

    <form id="my-form">

        <input type="text" id="my-input">

        <button id="my-button">提交</button>

    </form>

    <script>

        document.getElementById("my-form").addEventListener("submit", function(event) {

            event.preventDefault();

            console.log("表单提交已被阻止");

        });

    </script>    

上面给出的代码中,使用addEventListener()方法监听表单的submit事件,并在回调函数中调用event.preventDefault()方法阻止默认提交事件。在这个示例中,事件被阻止后,控制台会输出“表单提交已被阻止”。

2、防止Anchor标签的跳转

    

    <a href="https://www.baidu.com" id="my-link">链接</a>

    <script>

        document.getElementById("my-link").addEventListener("click", function(event) {

            event.preventDefault();

            console.log("跳转已被阻止");

        });

    </script>    

上面给出的代码中,使用addEventListener()方法监听Anchor标签的click事件,并在回调函数中调用event.preventDefault()方法阻止默认跳转事件。在这个示例中,事件被阻止后,控制台会输出“跳转已被阻止”。

事件冒泡和e.preventdefault()的关系

事件冒泡是指事件被触发后,会自动向父元素传播。也就是说,如果在一个子元素上绑定了某个事件,当事件被触发后,该事件会向父元素一级一级地传播。直到传到document对象才停止。

在事件冒泡的过程中,如果同时使用了e.preventdefault()和e.stopPropagation(),则事件的默认行为会被阻止,并且不会再传播到父元素上。

    1.jpg

    <div id="my-parent">

        <div id="my-child">点击我</div>

    </div>

    <script>

        document.getElementById("my-child").addEventListener("click", function(event) {

            event.preventDefault();

            event.stopPropagation();

            console.log("事件传播已被阻止");

        });

    </script>    

上面给出的代码中,使用addEventListener()方法监听子元素的click事件,并在回调函数中对事件进行了阻止。

同时,使用event.stopPropagation()方法阻止事件冒泡,保证事件不会传播到父元素上。


版权声明:倡导尊重与保护知识产权,本站有部分资源、图片来源于网络,如有侵权,请联系我们修改或者删除处理。
转载请说明来源于"土嘎嘎" 本文地址:http://www.tugaga.com/jishu/js/1663.html
<<上一篇 2023-08-17
下一篇 >> 2023-08-21

编辑推荐

热门文章