Vue.js Event Modifier

2019-10-13

在使用 Vue 的 v-on 時可以搭配修飾符，幫助我們加上一些附加作用，而 Vue 幫我們包裝好的修飾符有事件修飾符、按鍵修飾符，與滑鼠修飾符這三種。

什麼是修飾符

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

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

事件修飾符

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

.stop 停止冒泡事件

.stop 其實就等同於調用 event.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>

舉例使用情境：在 Twitter 上，每一則 Tweet 被點擊任何位置，都會進入該則推文的專屬頁面。然而，推文裡也有一些圖片、連結、按鈕，在點擊這些元素時，只會開啟圖片或連結，而不會再繼續進入推文頁，這就是應用 stopPropagation 的效果。

.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 先回傳結果了。

.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>

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