vue事件修飾符（阻止事件冒泡、阻止默認事件....）

這應該是vue提供給程序員的語法糖確實很好用。官方說法是：

在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。儘管我們可以在方法中輕鬆實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理 DOM 事件細節。（雙手雙腳贊同）

這也能讓函數看着更乾淨，爽就完了！

• .stop（阻止事件冒泡）
• .prevent（阻止默認事件）
• .capture（子元素觸發事件，需先觸發父元素事件，再執行子元素的事件）
• .self（可以理解爲跳過冒泡事件和捕獲事件，只有直接作用在該元素上的事件纔可執行）
• .once（事件只觸發一次）
• .passive（不會阻止默認行爲）

<div id="vue">
			<div class="box1" @click="box(1)">
			
				<div class="box2" @click="box(2)">
				
					<div class="box3" @click="box(3)">
						
					</div>
					
				</div>
				
			</div>
		</div>
<script>
			const vue=new Vue({
				el:"#vue",
				data:{},
				methods:{
					box:function(that){
						console.log(that);
					}
				}
			})
</script>

stop：

阻止事件冒泡，在js中都是要在函數裏寫e.stopPropagation()，在vue中用法：@click.stop="box3()"

prevuet:

阻止默認事件

<a href="2.html" @click.prevent="box(2)">阻止默認事件</a>//a標籤將不再跳轉並輸出2
or
<a href="2.html" @click.prevent>阻止默認事件</a>//不觸發事件的寫法，可以單寫，以上屬性都可以單寫

capture:

相當於是事件捕獲把，在子元素觸發時，先執行父元素的事件，再執行子元素事件

<div class="box1" @click.capture="box(1)">
				<div class="box2" @click.capture="box(2)">
					<div class="box3" @click="box(3)">
						
					</div>
				</div>
			</div>

上面代碼輸出123，如果box2沒有capture修飾符輸出結果是132，這說明執行完父元素事件後再執行子元素的事件也會向上冒泡

self:

跳過冒泡事件： 如第一個代碼塊，如果點擊box3，會依次冒泡在控制檯輸出，321。現在給box2加上@click.self="box2()"這時候點box3輸出的是31，越過了box2的事件。
跳過捕獲事件：

<div class="box1" @click.capture="box(1)">
				<div class="box2" @click.capture="box(2)">
					<div class="box3" @click="box(3)">
						
					</div>
				</div>
			</div>

這時候點box3輸出123，但給box2加上@click.capture.self="box2()"後輸出的是1，3，當然沒人會寫了capture還加上self
說半天就是，只能點自己纔可以觸發事件

once:

表示此事件或修飾符只執行一次

<div id="vue">
			<div class="box1" @click="box(1)">
			
				<div class="box2" @click="box(2)">
				
					<div class="box3" @click.stop.once="box(3)">
						
					</div>
					
				</div>
				
			</div>
		</div>

以上代碼，點box3控制檯只輸出3，因爲也阻止了事件冒泡，第二次點擊時輸出21，不僅事件被移除，阻止冒泡修飾符也失去效果（修飾符可串聯，需要注意會有順序問題）。

passive:

告訴瀏覽器這個監聽事件沒有阻止默認事件，放心執行。
這個屬性不是多此一舉，是屬於代碼優化，多用於移動端的touchmove，pc端的wheel，可以參考這篇文章
與prevent修飾符串聯會出錯哦