1---
2title: Event Modifier Order Matters
3impact: MEDIUM
4impactDescription: Modifier order affects event handling behavior - wrong order causes unexpected propagation or prevention
5type: gotcha
6tags: [vue3, events, modifiers, v-on, click, form]
7---
8 
9# Event Modifier Order Matters
10 
11**Impact: MEDIUM** - When chaining event modifiers, the order determines behavior because Vue generates code in the same sequence. Using `.prevent.self` vs `.self.prevent` produces different results that can cause subtle bugs in event handling.
12 
13## Task Checklist
14 
15- [ ] Always consider modifier order when chaining multiple modifiers
16- [ ] Use `.prevent.self` to prevent default on element AND children
17- [ ] Use `.self.prevent` to prevent default ONLY on the element itself
18- [ ] Test event behavior on both the element and its children
19 
20**Incorrect:**
21```html
22<!-- WRONG: Unintended behavior - prevents clicks on children too -->
23<template>
24  <div @click.prevent.self="handleClick">
25    <button>Child Button</button> <!-- Default also prevented here! -->
26  </div>
27</template>
28```
29 
30```html
31<!-- WRONG: Assuming order doesn't matter -->
32<template>
33  <!-- Developer expects only self clicks to be handled -->
34  <!-- But .prevent runs first, affecting all clicks -->
35  <a href="/page" @click.prevent.self="navigate">
36    <span>Click me</span>
37  </a>
38</template>
39```
40 
41**Correct:**
42```html
43<!-- CORRECT: Only prevent default on the element itself -->
44<template>
45  <div @click.self.prevent="handleClick">
46    <button>Child Button</button> <!-- Default NOT prevented here -->
47  </div>
48</template>
49```
50 
51```html
52<!-- CORRECT: Prevent default on element and children -->
53<template>
54  <form @submit.prevent.self="onSubmit">
55    <button type="submit">Submit</button>
56  </form>
57</template>
58```
59 
60```html
61<!-- CORRECT: Explicit intent with separate handlers when needed -->
62<template>
63  <div @click.self="handleSelfClick">
64    <button @click.prevent="handleChildClick">
65      Child with prevented default
66    </button>
67  </div>
68</template>
69```
70 
71## How Modifier Order Works
72 
73```javascript
74// Vue compiles modifiers in order, so:
75 
76// @click.prevent.self compiles to:
77// event.preventDefault()
78// if (event.target !== event.currentTarget) return
79// handler()
80 
81// @click.self.prevent compiles to:
82// if (event.target !== event.currentTarget) return
83// event.preventDefault()
84// handler()
85```
86 
87## Common Modifier Combinations
88 
89```html
90<!-- Stop propagation AND prevent default -->
91<a @click.stop.prevent="handleClick">Link</a>
92 
93<!-- Capture mode with once -->
94<div @click.capture.once="handleOnce">...</div>
95 
96<!-- Only exact modifier key combination -->
97<button @click.ctrl.exact="onCtrlClick">Ctrl+Click Only</button>
98```
99 
100## Reference
101- [Vue.js Event Handling - Event Modifiers](https://vuejs.org/guide/essentials/event-handling.html#event-modifiers)
102