公主的腿间舌奴们np肉_国产在热线精品视频99公交_公主车上荫蒂添的好舒服_公侵犯人妻中文字慕一区二区_公么大龟弄得我好舒服秀_公交车+多人+高cH文章推荐_日本熟妇另类视频在线播放

Vue2.0 阻止事件冒泡

2021-6-21 前端達(dá)人

問(wèn)題

描述：點(diǎn)擊 save-btn 元素會(huì)同時(shí)觸發(fā) wrap 綁定的 click 事件。

<div class="wrap" @click="cancel"> <div class="save-btn" @click="save('save result')"></div> </div>

解決方案：阻止事件冒泡

方案一：把特殊變量 $event 傳入內(nèi)聯(lián)語(yǔ)句中，訪問(wèn)原始的 DOM 事件。

<div class="wrap" @click="cancel"> <div class="save-btn" @click="save('save result',$event)"></div> </div>

// ... methods: { save(msg, event){ // 現(xiàn)在可以訪問(wèn)原生事件對(duì)象 if(event) event.preventDefault(); alert(msg); } }

方案二：利用 Vue.js 提供的事件修飾符解決。在 save-btn 元素上使用 @click.stop="save('save result')" 即可。

事件修飾符

在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見(jiàn)的需求。盡管我們可以在方法中輕松實(shí)現(xiàn)這點(diǎn)，但更好的方式是：方法只有純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細(xì)節(jié)。

為了解決這個(gè)問(wèn)題，Vue.js 為 v-on 提供了事件修飾符。之前提過(guò)，修飾符是由點(diǎn)開(kāi)頭的指令后綴來(lái)表示的。

.stop .prevent .capture .self .once .passive

<!-- 阻止單擊事件繼續(xù)傳播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重載頁(yè)面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修飾符可以串聯(lián) --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修飾符 --> <form v-on:submit.prevent></form> <!-- 添加事件監(jiān)聽(tīng)器時(shí)使用事件捕獲模式 --> <!-- 即元素自身觸發(fā)的事件先在此處理，然后才交由內(nèi)部元素進(jìn)行處理 --> <div v-on:click.capture="doThis">...</div> <!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) --> <!-- 即事件不是從內(nèi)部元素觸發(fā)的 --> <div v-on:click.self="doThat">...</div> <!-- 2.1.4 新增 點(diǎn)擊事件將只會(huì)觸發(fā)一次 --> <a v-on:click.once="doThis"></a> <!-- 2.3.0 新增 滾動(dòng)事件的默認(rèn)行為 (即滾動(dòng)行為) 將會(huì)立即觸發(fā) --> <!-- 而不會(huì)等待 `onScroll` 完成  --> <!-- 這其中包含 `event.preventDefault()` 的情況 --> <!-- 該修飾符尤其能夠提升移動(dòng)端的性能 --> <!-- 不要把 .passive 和 .prevent 一起使用，因?yàn)?.prevent 將會(huì)被忽略，同時(shí)瀏覽器可能會(huì)向你展示一個(gè)警告。請(qǐng)記住，.passive 會(huì)告訴瀏覽器你不想阻止事件的默認(rèn)行為。 --> <div v-on:scroll.passive="onScroll">...</div>

使用修飾符時(shí)，順序很重要；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。因此，用 v-on:click.prevent.self 會(huì)阻止所有的點(diǎn)擊，而 v-on:click.self.prevent 只會(huì)阻止對(duì)元素自身的點(diǎn)擊。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。