什麼是修飾符

修飾符很常搭配 v-on 一起使用,大致上有以下三種:

  • 事件修飾符:.stop.prevent.capture.self.once
  • 按鍵修飾符:特定鍵、別名、組合鍵
  • 滑鼠修飾符:.left.right.middle

事件修飾符

事件修飾符就是觸發事件時會順帶作用的修飾符。

.stop 停止冒泡事件

.stop 其實就等同於調用 event.stopPropagation()

什麼是 stopPropagation?

一般而言,觸發 DOM 元素時是「由內而外」傳播。
例如:當我們想要點擊中間的 box 元素時,外面的 div 元素也會一起被觸發,而它們觸發的順序會是由內向外的 box → div。

由內而外傳播

但是如果我只想點擊 box 不想點到 div 的話該怎麼做呢?
這時可以使用 .stop 修飾符!

把它加上去之後,觸發時就不會繼續向外傳播,也就是點擊裡面的 box 不會再觸發 div 了。

<div id="app">
  <div @click="trigger('div')">
    <span @click.stop="trigger('box')"></span>
  </div>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      // omit...
    },
    methods: {
      trigger: function(name) {
        console.log(name, '此事件被觸發了');
      },
    },
  });
</script>

.prevent 禁止預設行為

加上 .prevent 會禁止元素原本要做的行為,其實這就等同於調用 event.preventDefault() 方法。

.capture 由外而內傳播

.capture 會讓傳播順序相反,變成由外而內傳播。

例如:點擊中間的按鈕後,會回傳傳播順序相反的結果。

<div id="app">
  <div @click.capture="trigger('div')">
    <span @click.capture="trigger('box')">
      <button @click.capture="trigger('button')">按我</button>
    </span>
  </div>
</div>

如圖,原本是由內而外傳播,現在變成由最外層的 div 先回傳結果了。

GITHUB

.self 只觸發自己

加上 .self 修飾符,就能夠讓點擊時只觸發到自己這一個元素,而不會觸發其他元素。

<div id="app">
  <div @click.self="trigger('div')">
    <span @click.self="trigger('box')">
      <button @click.self="trigger('button')">按我</button>
    </span>
  </div>
</div>

.once 只觸發一次

加上 .once 會使得事件偵聽器只觸發一次。

<div id="app">
  <div @click.once="trigger('div')">
    <span @click.once="trigger('box')">
      <button @click.once="trigger('button')">按我</button>
    </span>
  </div>
</div>

按鍵修飾符

透過鍵盤的按鍵可以觸發的一些效果。

keyCode (KeyAlias)

事件會從特定鍵觸發,鍵盤上的每個按鍵都有一個對應的編號,透過一些查詢編號網站像是JavaScript Event KeyCodes可以查到,像是 Enter = 13。

使用範例:在 keyup 後面直接加上 keyCode 號碼像是 @keyup.13,就能在按下 Enter 時觸發哩。

<input type="text" v-model="text" @keyup.13="trigger(13)" />

別名修飾

當然我們不一定要記住以上那些按鍵編號,我們也可以使用別名當作按鍵修飾符。
例如:.enter.tab.delete.esc.space.up.down.left.right

像是 @keyup.space 就是只有按下 space 時才會觸發,如果是按 Enter 或其他按鍵都不會觸發事件。

<input type="text" v-model="text" @keyup.space="trigger('space')" />

相應按鍵(組合鍵)

只有按下相應按鍵時,才會觸發事件的監聽器,例如:.ctrl.alt.shift.meta

範例:@keyup.shift.enter 就是要同時按 Shift + Enter 才會觸發事件。
這在自製一些輸入框的元件時會用到,像是設計為 Enter 是換行,而 Shift + Enter 才是送出留言之類的。

<input
  type="text"
  v-model="text"
  @keyup.shift.enter="trigger('shift + Enter')"
/>

滑鼠修飾符

預設點擊的是左鍵 (left),總共有以下三種滑鼠修飾符:

  • .left:只有點擊滑鼠"左鍵"時才會觸發
  • .right:只有點擊滑鼠"右鍵"時才會觸發
  • .middle:只有點擊滑鼠"中鍵"時才會觸發

範例:@click.right

<span class="box" @click.right="trigger('Right button')"></span>

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫