2021-6-21 前端達人
描述：點擊 save-btn 元素會同時觸發 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 事件細節。
為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符。之前提過，修飾符是由點開頭的指令后綴來表示的。
.stop .prevent .capture .self .once .passive <!-- 阻止單擊事件繼續傳播 --> <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> <!-- 只當在 event.target 是當前元素自身時觸發處理函數 --> <!-- 即事件不是從內部元素觸發的 --> <div v-on:click.self="doThat">...</div> <!-- 2.1.4 新增 點擊事件將只會觸發一次 --> <a v-on:click.once="doThis"></a> <!-- 2.3.0 新增 滾動事件的默認行為 (即滾動行為) 將會立即觸發 --> <!-- 而不會等待 `onScroll` 完成 --> <!-- 這其中包含 `event.preventDefault()` 的情況 --> <!-- 該修飾符尤其能夠提升移動端的性能 --> <!-- 不要把 .passive 和 .prevent 一起使用，因為 .prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告。請記住，.passive 會告訴瀏覽器你不想阻止事件的默認行為。 --> <div v-on:scroll.passive="onScroll">...</div>
使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。因此，用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
轉自：腳本之家
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( m.wtxcl.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
作者：一通
來源：簡書