vue 中 event.stopPropagation() 和event.preventDefault() 使用

作者：笔触狂放9 | 2024-02-13 01:58:42

踩

vue e.stopprogration()

1.event.stopPropagation()方法

这是阻止事件的冒泡方法，不让事件向document上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，

2.event.preventDefault()方法

这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；

3.return false ；

这个方法比较暴力，他会同事阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()

案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <a href="//caibaojian.com/w3school/" @click="btn($event)">W3School</a>
            <p>preventDefault() 方法将防止上面的链接打开 URL。</p>
        </div>
    </body>
    <script>
        new Vue({
            el: '#app',
            methods: {
                btn(event) {
                    //event.preventDefault()
                    event.stopPropagation();  //如果是连接还是会打开
                    console.log(event.type);
                }
            }
        })
    </script>
</html>

转载于:https://www.cnblogs.com/nongzihong/p/10683782.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/79366