vue的事件修饰符
1. .stop
.stop是阻止事件冒泡
<div id="app">
<div class="inner" @click="divhandler">
<input type="button" value="点击" @click="btnhandler">
</div>
</div>
如果这样嵌套,点击内部button的时候会产生事件冒泡
容易产生连锁反应 ,此时就需要事件修饰符阻止事件冒泡
在@click后面添加.stop
<div id="app">
<div class="inner" @click="divhandler">
<input type="button" value="点击" @click.stop="btnhandler">
</div>
</div>
此时就能阻止事件冒泡
————————————————————————————————————————————————————————
2. .prevent
阻止事件默认行为
<a href="http://www.baidu.com" @click.prevent="tishi">跳转百度</a>
methods:{
tishi(){
console.log('触发了默认行为')
}
};
此时点击a链接则不会跳转页面 阻止了默认行为
————————————————————————————————————————————————————————
3. .capture
事件捕获机制
<div id="app">
<div class="inner" @click.capture="divhandler">
<input type="button" value="点击" @click.stop="btnhandler">
</div>
此时点击内部button的时候就会被外部div捕获
————————————————————————————————————————————————————————
4. .self
事件仅在元素自身
<div id="app">
<div class="inner" @click.self="divhandler">
<input type="button" value="点击" @click.stop="btnhandler">
</div>
只有自身触发事件
————————————————————————————————————————————————————————
5. .once
事件只触发一次
<div id="app">
<div class="inner" @click="divhandler">
<input type="button" value="点击" @click.once.stop="btnhandler">
</div>
</div>
此时第一次点击button按钮就会阻止事件冒泡,而第二次点击就不会阻止事件冒泡