快捷導(dǎo)航

vue3中的事件修飾符詳解

更新時(shí)間：2025年02月05日 08:51:19 作者：冰紅茶-Tea

Vue3中的事件修飾符包括：.stop（阻止冒泡）、.prevent（阻止默認(rèn)事件）、.self（阻止自身事件）、.capture（打亂冒泡順序）、.once（事件只觸發(fā)一次）和.passive（事件默認(rèn)行為立即執(zhí)行）,這些修飾符可以幫助開發(fā)者更靈活地控制事件的處理方式

vue3中事件修飾符

vue3中的事件修飾符有：

   .stop                // 阻止事件傳遞
   .prevent          // 停止默認(rèn)事件
   .self                // 自身執(zhí)行
   .capture         // 使用捕獲模式
   .once             // 只執(zhí)行一次
   .passive         // 立即執(zhí)行

1、.stop

作用：阻止冒泡事件

冒泡事件：子元素的事件傳遞到父元素，即你促發(fā)子元素的click事件，由于冒泡，會(huì)使外層的父元素的click事件同時(shí)觸發(fā)。

<div @click="shout(1)">
      <button @click="shout(2)">點(diǎn)擊查看內(nèi)容</button>
</div>

內(nèi)容彈出時(shí)先觸發(fā)彈出2，再觸發(fā)彈出1。

方法一：在子元素的click后面直接加上.stop，就可以阻止冒泡事件了：

 <div @click="shout(1)">
        <button @click.stop="shout(2)">點(diǎn)擊查看內(nèi)容</button>
 </div>

方法二：使用參數(shù)對(duì)象的stopDefault方法，如下：

<div @click="shout(1)">
       <button @click="shout(2)">點(diǎn)擊查看內(nèi)容</button>
</div>
 methods: {
      shout(e){
           e.stopDefault()
       }
}

2、.prevent

作用：阻止瀏覽器的默認(rèn)事件

默認(rèn)事件：移動(dòng)端瀏覽器的下拉刷新事件、點(diǎn)擊超鏈接會(huì)跳轉(zhuǎn)頁(yè)面.......

<a  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="showInfo">點(diǎn)我提示信息</a>

如上面的示例，點(diǎn)擊a標(biāo)簽就會(huì)跳轉(zhuǎn)到新鏈接，這個(gè)時(shí)候我們需要阻止默認(rèn)事件，除了去掉href鏈接這個(gè)方法外，還可以用prevent阻止默認(rèn)事件。

方法一：在click后面直接加上.prevent，如下：

<a  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click.prevent="showInfo">點(diǎn)我提示信息</a>

方法二：使用參數(shù)對(duì)象的preventDefault方法，如下：

<a  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="showInfo($event)">點(diǎn)我提示信息</a>       
methods: {
     showInfo(e){
            e.preventDefault()
      }
}

3、.self

作用：阻止自身事件促發(fā)，但不會(huì)阻止冒泡

<div class="outer" @click="outer">
    <div class="middle" @click.self="middle"> 
　　　<button @click="inner">點(diǎn)擊</button>
   </div>
</div>

當(dāng)我們點(diǎn)擊button的時(shí)候，先執(zhí)行inner，傳遞到middle，此時(shí)middle里有一個(gè).self，.self阻止了middle的click事件，所以繼續(xù)冒泡到outer，執(zhí)行outer的click事件。

結(jié)果：執(zhí)行click事件的順序：inner ----> outer

4、.capture

作用：打亂冒泡順序（即可以理解為給元素添加一個(gè)監(jiān)聽器，當(dāng)元素發(fā)生冒泡時(shí)，先觸發(fā)帶有該修飾符的元素。若有多個(gè)該修飾符，則由外而內(nèi)觸發(fā)。）

<!--  captrue:使用事件的捕捉模式 -->
<div class="box1" @click.capture="showMsg(1)">
      div1 
      <div  class="box2" @click="showMsg(2)">
             div2
      </div>
</div>
上面的執(zhí)行順序是1、2