前言

vue一共給我們準(zhǔn)備了6個(gè)事件修飾符，前三個(gè)比較常用，后三個(gè)少見(jiàn)，這里著重講下前三個(gè)

1.prevent:阻止默認(rèn)事件(常用)
2. stop:阻止事件冒泡(常用)
3. once:事件只觸發(fā)一次(常用)
4.captrue:使用事件的捕捉模式(不常用)
5.self:只有event.target是當(dāng)前操作的元素時(shí)才觸發(fā)事件(不常用)
6.passive:事件的默認(rèn)行為立即執(zhí)行，無(wú)需等待事件回調(diào)執(zhí)行完畢(不常用)

阻止默認(rèn)事件(常用)

首先寫一個(gè)簡(jiǎn)單的例子，一個(gè)簡(jiǎn)單的超鏈接標(biāo)簽，我們給一個(gè)百度鏈接和一個(gè)單擊事件

查看頁(yè)面，雖然點(diǎn)擊文字出現(xiàn)了彈窗，但是隨之跳到了超鏈接指向的地址

跳轉(zhuǎn)到鏈接是a標(biāo)簽的默認(rèn)行為，那么我們?cè)趺醋柚惯@個(gè)默認(rèn)行為呢？

普通阻止默認(rèn)行為方式

使用參數(shù)對(duì)象的preventDefault方法

這時(shí)候?yàn)g覽器點(diǎn)擊文字提示彈框后就不會(huì)跳轉(zhuǎn)了

vue阻止默認(rèn)行為方式

在vue中，不用我們親自編寫上面的方式，我們可以在事件名稱后面跟一個(gè).prevent就可以阻止默認(rèn)行為了，效果都是一樣的

 <!-- .prevent:阻止默認(rèn)事件 -->
<a href="http://www.baidu.com" @click.prevent="showInfo">點(diǎn)我提示信息</a>

阻止事件冒泡(常用)

編寫代碼，實(shí)現(xiàn)例子

我們發(fā)現(xiàn)，單擊玩確定后會(huì)繼續(xù)彈窗，這就是一個(gè)冒泡事件

阻止的方式和上一個(gè)例子類似，我這里以及下面都用vue特定的阻止行為了

我們?cè)趩螕羰录懊婕由?stop

<!--   .stop:阻止事件冒泡 -->
<button @click.stop="showInfo">點(diǎn)我提示信息</button>

再次驗(yàn)證瀏覽器，解決問(wèn)題

事件只觸發(fā)一次(常用)

編寫代碼

如圖，按鈕點(diǎn)擊多少次，就會(huì)彈窗多少次

我們加上once修飾符

<!--   3.once:事件只觸發(fā)一次 --><button @click.once="showInfo">點(diǎn)我提示信息</button>

使用事件的捕捉模式 (不常用)

   <!--  4.captrue:使用事件的捕捉模式 --><div class="box1" @click.capture="showMsg(1)">div1 <div  class="box2" @click="showMsg(2)">div2</div></div>

只有event.target是當(dāng)前操作的元素時(shí)才觸發(fā)事件(不常用)

 <!--     5.只有event.target是當(dāng)前操作的元素時(shí)才觸發(fā)事件 --><div class="demo1" @click.self="showInfo"><button @click="showInfo">點(diǎn)我提示信息</button></div>

事件的默認(rèn)行為立即執(zhí)行，無(wú)需等待事件回調(diào)執(zhí)行完畢不常用)

擴(kuò)展：多個(gè)修飾符使用小技巧

比如現(xiàn)在有個(gè)需求，我們知道點(diǎn)擊超鏈接后會(huì)彈窗然后跳轉(zhuǎn)到指定的url，那么我們又想阻止冒泡，又想阻止默認(rèn)行為，該怎么辦呢？

我們可以多個(gè)修飾符一起使用，比如

// 多個(gè)事件修飾符一起使用，可以隨意順序<a href="http://www.baidu.com" @click.prevent.stop="showInfo">點(diǎn)我提示信息</a>

頁(yè)面上只會(huì)彈窗就不跳轉(zhuǎn)了

總結(jié)

個(gè)人感覺(jué)，了解常見(jiàn)的這些時(shí)間修飾符就夠用了，不常見(jiàn)的了解即可。用到的時(shí)候再搜索相關(guān)資料