Vue事件修饰符

vue事件修饰符
.stop - 阻止冒泡
.prevent - 阻止默认事件
.capture - 阻止捕获
.self - 只监听触发该元素的事件
.once - 只触发一次
.left - 左键事件
.right - 右键事件
.middle - 中间滚轮事件

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js 通过由点 . 表示的指令后缀来调用修饰符。
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

Vue事件修饰符：stop、once、selt、prevent、capture


<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当事件在该元素本身 (比如不是子元素) 触发时触发回调 -->
<div v-on:click.self="doThat">...</div>



关于.stop和.self的区别，前者是防止事件冒泡，后者则是忽略了事件冒泡和事件捕获的影响，只有直接作用在该元素上的事件才会被调用。



<div @click="handler1">
	handler1
	<div @click="handler2">handler2</div>
</div>
...
handler1() {
	console.log('handler1')
}
handler2() {
	console.log('handler2')
}

点击handler2发生事件冒泡，输出：
handler2
handler1

stop
<div @click="handler1">
	handler1
	<div @click.stop="handler2">handler2</div>
</div>

添加.stop事件修饰符阻止事件冒泡，输出：
handler2

self
<div @click.self="handler1">
	handler1
	<div @click="handler2">handler2</div>
</div>

添加.self事件修饰符，只有作用在该元素上的事件起作用，输出：
handler2

once
<div @click="handler1">
	handler1
	<div @click.once="handler2">handler2</div>
</div>

添加.once事件修饰符，handler2只能触发一次点击事件
第一次点击handler2，输出：
handler2
handler1

第n次点击handler2，输出：
handler1

prevent
<a href="https://www.baidu.com" @click.prevent="other">百度</a>

添加.prevent事件修饰符，阻止默认事件，执行other事件

Vue事件修饰符：stop、once、selt、prevent、capture
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身 (比如不是子元素) 触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

关于.stop和.self的区别，前者是防止事件冒泡，后者则是忽略了事件冒泡和事件捕获的影响，只有直接作用在该元素上的事件才会被调用。
...
<div @click="handler1">
	handler1
	<div @click="handler2">handler2</div>
</div>
...
handler1() {
	console.log('handler1')
}
handler2() {
	console.log('handler2')
}
...

点击handler2发生事件冒泡，输出：
handler2
handler1

stop
<div @click="handler1">
	handler1
	<div @click.stop="handler2">handler2</div>
</div>

添加.stop事件修饰符阻止事件冒泡，输出：
handler2

self
<div @click.self="handler1">
	handler1
	<div @click="handler2">handler2</div>
</div>

添加.self事件修饰符，只有作用在该元素上的事件起作用，输出：
handler2

once
<div @click="handler1">
	handler1
	<div @click.once="handler2">handler2</div>
</div>

添加.once事件修饰符，handler2只能触发一次点击事件
第一次点击handler2，输出：
handler2
handler1

第n次点击handler2，输出：
handler1

prevent
<a href="https://www.baidu.com" @click.prevent="other">百度</a>

添加.prevent事件修饰符，阻止默认事件，执行other事件