Vue.js入门笔记 事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
Vue 事件修饰符
.stop阻止事件继续传播（阻止冒泡）.prevent阻止默认事件.capture添加事件监听器时使用事件捕获模式.self只点击当前元素才会被执行.once只触发一次事件处理函数.passive只有修饰符
.stop 阻止冒泡
<h1>.stop 阻止事件冒泡</h1>
<div class="inside" @click.stop="inside">
<input type="button" value="确定" @click.stop="button">
</div>var vm = new Vue({
el : "#app",
methods: {
button(){
console.log("触发了点击 button 事件");
},
inside(){
console.log("触发了点击 inside 事件");
},
},
});
stop事件
.prevent 阻止默认事件
<h1>.prevent 阻止默认事件</h1>
<p>点击链接的时候阻止跳转事件</p>
<a href="http://debuginn.cn" @click.prevent="clickLink">Debug客栈</a>
<br>var vm = new Vue({
el : "#app",
methods: {
button(){
console.log("触发了点击 button 事件");
},
inside(){
console.log("触发了点击 inside 事件");
},
clickLink(){
console.log("触发了点击 链接点击 事件");
}
},
});
prevent事件
点击链接的时候阻止跳转事件。
.capture 添加事件监听器时使用事件捕获模式
capture事件
.self 只点击当前元素才会被执行
点击那个元素，那个元素才有事件产生，父子元素互不影响。
<h1>.self 只点击当前元素才会被执行</h1>
<div class="outside" @click.self="outside">
<div class="inside" @click.self="inside">
<input type="button" value="确定" @click.self="button">
</div>
</div>
<br>var vm = new Vue({
el : "#app",
methods: {
button(){
console.log("触发了点击 button 事件");
},
inside(){
console.log("触发了点击 inside 事件");
},
outside(){
console.log("触发了点击 outside 事件");
},
clickLink(){
console.log("触发了点击 链接点击 事件");
}
},
});.once 只触发一次事件处理函数
once事件
第一次点击元素有事件产生，第二次点击就没有相对应事件的产生。
<h1>.once 只触发一次事件处理函数</h1>
<div class="outside" @click.once="outside">
<div class="inside" @click.once="inside">
<input type="button" value="确定" @click.once="button">
</div>
</div>
<br>.passive 只有修饰符
passive事件1
passive事件2
点击元素后有事件产生之后发生跳转事件。
<h1>.passive 只有修饰符</h1>
<a href="http://debuginn.cn" @click.passive="clickLink">Debug客栈</a>
<br>本文链接：https://cloud.tencent.com/developer/article/1558652
本文采用CC BY-NC-SA 3.0 Unported协议进行许可，转载请保留此文章链接
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录