問題
描述：點擊 save-btn 元素會同時觸發(fā) wrap 綁定的 click 事件斯嚎。
<div class="wrap" @click="cancel">
<div class="save-btn" @click="save('save result')"></div>
</div>
解決方案：阻止事件冒泡
-
方案一：把特殊變量
$event傳入內聯語句中庇麦，訪問原始的 DOM 事件业汰。<div class="wrap" @click="cancel"> <div class="save-btn" @click="save('save result',$event)"></div> </div>// ... methods: { save(msg, event){ // 現在可以訪問原生事件對象 if(event) event.preventDefault(); alert(msg); } } 方案二：利用 Vue.js 提供的事件修飾符解決钮呀。在 save-btn 元素上使用
@click.stop="save('save result')"即可绕德。
事件修飾符
在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求翔冀。盡管我們可以在方法中輕松實現這點，但更好的方式是：方法只有純粹的數據邏輯瓦阐，而不是去處理 DOM 事件細節(jié)蜗侈。
為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符睡蟋。之前提過踏幻，修飾符是由點開頭的指令后綴來表示的。
.stop
.prevent
.capture
.self
.once
.passive
<!-- 阻止單擊事件繼續(xù)傳播 -->
<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>
<!-- 添加事件監(jiān)聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發(fā)的事件先在此處理戳杀，然后才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當在 event.target 是當前元素自身時觸發(fā)處理函數 -->
<!-- 即事件不是從內部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>
<!-- 2.1.4 新增 點擊事件將只會觸發(fā)一次 -->
<a v-on:click.once="doThis"></a>
<!-- 2.3.0 新增 滾動事件的默認行為 (即滾動行為) 將會立即觸發(fā) -->
<!-- 而不會等待 `onScroll` 完成 -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<!-- 該修飾符尤其能夠提升移動端的性能 -->
<!-- 不要把 .passive 和 .prevent 一起使用该面，因為 .prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告信卡。請記住隔缀，.passive 會告訴瀏覽器你不想阻止事件的默認行為。 -->
<div v-on:scroll.passive="onScroll">...</div>
使用修飾符時傍菇，順序很重要猾瘸；相應的代碼會以同樣的順序產生。因此，用 v-on:click.prevent.self 會阻止所有的點擊牵触，而 v-on:click.self.prevent 只會阻止對元素自身的點擊淮悼。
更多信息請查看官網：事件處理
