vue事件修饰符

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按钮就会阻止事件冒泡，而第二次点击就不会阻止事件冒泡