鍍金池/ 問(wèn)答/HTML/ vue中的事件修飾符順序問(wèn)題

vue中的事件修飾符順序問(wèn)題

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

不是很理解官方文檔中這句話，然后在網(wǎng)上找也沒(méi)找到有詳細(xì)分析這句話的。v-on:click.prevent是會(huì)阻止所有傳遞來(lái)的事件的默認(rèn)行為，然后后面再加上.self是元素本身觸發(fā)時(shí)才觸發(fā)回調(diào)函數(shù)，是這個(gè)意思嗎？

回答
編輯回答
懷中人

它的意思就是前面的條件滿足了，才會(huì)去執(zhí)行后面的。

// 給a一個(gè)內(nèi)邊框
<div class="a">
    <div class="b"></div>
</div>

a.@click.self.prevent="c"的意思是當(dāng)你點(diǎn)擊的元素是a的時(shí)候，才會(huì)prevent默認(rèn)事件，而且執(zhí)行c事件，如果你點(diǎn)擊了b，由于事件傳播，傳播給了a，但是這個(gè)時(shí)候判斷出這個(gè)點(diǎn)擊事件不是a觸發(fā)的，所以不會(huì)prevent，也不會(huì)觸發(fā)c事件。

a.@click.prevent.self="c"總是先執(zhí)行prevent，無(wú)論是內(nèi)部元素還是本身元素觸發(fā)，他都會(huì)prevent默認(rèn)事件。只不過(guò)只有當(dāng)你點(diǎn)擊a元素的時(shí)候，才會(huì)觸發(fā)c事件，點(diǎn)擊內(nèi)部元素不觸發(fā)c事件。

所以官網(wǎng)上的這句話，v-on:click.prevent.self 會(huì)阻止所有的點(diǎn)擊的意思是它會(huì)阻止所有點(diǎn)擊的默認(rèn)事件，并且只有點(diǎn)擊當(dāng)前元素才會(huì)觸發(fā)你定義的事件。同理可理解后面那句話。

2017年2月26日 15:24