Vue中的事件修饰符

1.prevent：阻止默认事件（常用）；

<a href="http://www.baidu.com" @click="showInfo">点我触发事件</a>
<!-- 执行完showInfo事件后，网页会跳转 -->


<a href="http://www.baidu.com" @click.prevent="showInfo">点我触发事件</a>
<!-- 执行完showInfo事件后网页不会跳转 -->

2.stop：阻止事件冒泡（常用）；

<div style="height: 50px;background-color: skyblue;" @click="showInfo">
	<button @click="showInfo">点我触发事件</button>
</div>
<!-- 执行完button按钮的showInfo事件后，因为事件冒泡会跟着执行div标签的showInfo事件 -->



<div style="height: 50px;background-color: skyblue;" @click="showInfo">
	<button @click.stop="showInfo">点我触发事件</button>
</div>
<!-- 只执行button按钮的showInfo事件 -->

3.once：事件只触发一次（常用）；

<button @click="showInfo">点我触发事件</button>
<!-- 页面渲染完毕后，每次点击button按钮都会触发showInfo事件 -->



<button @click.once="showInfo">点我触发事件</button>
<!-- 页面渲染完毕后，只有第一次点击button按钮会触发showInfo事件 -->
<!-- 如果页面没有重新渲染，再次点击button按钮则不会再触发showInfo事件 -->

4.capture：使用事件的捕获模式；

<div style="padding: 5px;background-color: skyblue;" @click="console.log(1)">
	div1
	<div style="padding: 5px;background-color: orange;" @click="console.log(2)">
		div2
	</div>
</div>
<!-- 点击div2时控制台输出：2  1 -->
<!-- 点击div2时先经过事件捕获，后才是事件冒泡，捕获阶段是由外往内执行的，冒泡阶段是由内往外执行的 -->


<div style="padding: 5px;background-color: skyblue;" @click.capture="console.log(1)">
	div1
	<div style="padding: 5px;background-color: orange;" @click="console.log(2)">
		div2
	</div>
</div>
<!-- 点击div2时控制台输出：1   2 -->
<!-- div1加上了事件修饰符.capture，在捕获阶段就开始执行事件了 -->
<!-- 所以在点击div2时由外往内执行，先执行了div1的事件，再执行div2的事件 -->

5.self：只有event.target是当前操作的元素时才触发事件；

<!-- 事件为
showInfo(e){
	console.log(e.target)
}
-->

<div style="height: 50px;background-color:skyblue;" @click="showInfo">
	<button @click="showInfo">点我触发事件</button>
</div>
<!-- 输出: <button>点我触发事件</button> 
		  <button>点我触发事件</button>  -->
<!-- 当点击button按钮时因为事件冒泡同时触发了div标签的事件 -->



<div style="height:50px;background-color:skyblue" @click.self="showInfo">
	<button @click="showInfo">点我触发事件</button>
</div>
<!-- 输出: <button>点我触发事件</button> -->

<!-- 
div标签的event.target：
<div style="height:50px;background-color:skyblue">
	<button>点我触发事件</button>
</div>

button按钮的event.target：
<button>点我触发事件</button>

当在div标签的事件加上.self事件修饰符后，点击button按钮触发事件，
通俗来说因为此时的event.target是：<button>点我触发事件</button> ，
所以在执行完button按钮的事件后，事件冒泡div标签的事件时，
event.target不是当前操作的元素，所以不执行该事件
-->

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<!-- .passive 修饰符尤其能够提升移动端的性能。 -->
<div v-on:scroll.passive="onScroll">...</div>

总结

<!-- 修饰符可以连续写,如： -->
<a href="http://www.baidu.com" @click.prevent.stop="showInfo">点我提示信息</a>

<!-- 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
因此，用 v-on:click.prevent.self 会阻止所有的点击，
而 v-on:click.self.prevent 只会阻止对元素自身的点击。 -->

<!-- 不要把 .passive 和 .prevent 一起使用，
因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。
请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。 -->