Vue指令之事件修饰符 - ellaha

Vue指令之事件修饰符

知识点：

1，.stop 阻止事件继续传播（冒泡）

2，.prevent阻止标签默认事件

3， .capture添加事件侦听器时使用事件捕获模式，即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理

4，.self只当event.target事件在该元素本身（比如不是子元素）触发时触发回调

5，.once事件只触发一次

7，.passive 告诉浏览器你不想阻止事件的默认行为

// .stop 阻止事件继续传播（冒泡）
<body>
<div id="div1" @click="btn1">
    <div id="div2" @click.stop="btn2">
        你好
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#div1",
        data: {

        },
        methods: {
            btn1: function() {
                console.log('点击btn1')
            },
            btn2: function(){
                console.log('点击btn2')
            }
        }
    })
</script>

</body>

// 给div2添加self事件修饰符，只有点击当前元素才会触事件处理函数，通过冒泡或者捕获是不会执行此事件
<div id="div1" @click="btn1">
    <div id="div2" @click.self="btn2">
        <a href="www.baidu.com" @click.prevent="btn3">你好</a>
    </div>
</div>

<!--默认是冒泡行为，添加capture从外往里执行事件-->
<div id="div1" @click.capture="btn1">
    <div id="div2" @click="btn2">
        <a href="www.baidu.com" @click.prevent="btn3">你好</a>
    </div>
</div>

<!--.once事件只触发一次-->
<div id="div1" @click.once="btn1">
    <div id="div2" @click="btn2">
        <a href="www.baidu.com" @click.prevent="btn3">你好</a>
    </div>
</div>

posted on 2021-03-28 20:44 ellaha 阅读(78) 评论(0) 收藏举报

刷新页面返回顶部