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

vue 中 event.stopPropagation() 和event.preventDefault() 使用1.event.stopPropagation()方法这是阻止事件的冒泡方法，不让事件向document上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，2.event.pre...

梓鸿

5159人浏览 · 2019-04-10 15:39:00

梓鸿 · 2019-04-10 15:39:00 发布

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

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>

posted @ 2019-04-10 15:39 梓鸿阅读(...) 评论(...) 编辑收藏

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^