---
# System prepended metadata

title: v-on 修飾符 (2-6)
tags: [Vue, 2. 指令語法全介紹]

---

# v-on 修飾符 (2-6)
###### tags: `Vue`、`2. 指令語法全介紹`
2022.3.2

**本章所有內容只會調用此方法**

```
<script>
    methods:{
        trigger(name){
            console.log(`${name},此事件被觸發`)
        }
    }
</script>
```

### 1. 按鍵修飾符 (@keyup:只要按鍵盤就會觸發)
* #### 別名修飾符 : 當按鍵ENTER時才會觸發。
```
<input type="text" @keyup.enter = "trigger('Enter')">
```
* #### 相依別名修飾符 : 當按鍵ENTER+ALT才會被觸發。
```
<input type="text" @keyup.enter.alt = "trigger('Enter+Alt')">

<script>
    methods:{
        trigger(name){
            console.log(`${name},此事件被觸發`)
        }
    }
</script>
```
* #### 特定別名修飾符 : 當按鍵案'H'時才會被觸發(大小寫不分)。
 ```
<input type="text" @keyup.H = "trigger('H')">

<script>
    methods:{
        trigger(name){
            console.log(`${name},此事件被觸發`)
        }
    }
</script>
```

### 2. 滑鼠修飾符(@click)
* #### .left : 當滑鼠點擊左鍵觸發
```
<button type="button" @click.left="trigger('滑鼠左鍵')">按鈕</button>
```
* #### .right : 當滑鼠點擊右鍵觸發
```
<button type="button" @click.right="trigger('滑鼠右鍵')">按鈕</button>
```
* #### .middle : 當滑鼠點擊中鍵觸發
```
<button type="button" @click.middle="trigger('滑鼠中鍵')">按鈕</button>
```
### 3. 事件修飾符
* #### **.prevent** : 調用even.preventDefault()，取消HTML預設事件。
```
<!-- 可以避免重新整理 -->
<form @submit.prevent="trigger('取消HTML預設事件')">
    <button>送出表單</button>
</form>
```
* #### **.once** : 只觸發一次，除非從新整理。
```
<button type="button" @click.once = "trigger('只觸發一次')">按鈕</button>
```
* #### **.stop** : 調用event.stopPropagation()，由內向外查找，當事包裹型HTML時，事件觸發會重「內向外」一次觸發所有事件，因此用.stop可以阻止事件冒泡。
```
<div style="width: 200px; height: 200px; background-color: red;" @click.stop="trigger('外')">
    <div style="width: 150px; height: 150px; background-color: green;" @click.stop ="trigger('中')">
        <div style="width: 100px; height: 100px; background-color: blue;" @click.stop="trigger('內')"></div>
    </div>
</div>
```
* #### **.capture** : 添加事件偵聽器使用capture模式，原本包裹型是由「內向外」全部觸發，加上capture則會轉換成成「外而內」。
```
<div style="width: 200px; height: 200px; background-color: red;" @click.capture="trigger('外')">
    <div style="width: 150px; height: 150px; background-color: green;" @click.capture ="trigger('中')">
        <div style="width: 100px; height: 100px; background-color: blue;" @click.capture="trigger('內')"></div>
    </div>
</div>
```
* #### **.self** : 只當偵聽器綁定的元素本身觸發時才觸發回調，只會觸發點擊物件的事件。
```
<div style="width: 200px; height: 200px; background-color: red;" @click.self="trigger('外')">
    <div style="width: 150px; height: 150px; background-color: green;" @click.self ="trigger('中')">
        <div style="width: 100px; height: 100px; background-color: blue;" @click.self="trigger('內')"></div>
    </div>
</div>
```
