102 lines
2.7 KiB
Markdown
102 lines
2.7 KiB
Markdown
---
|
|
title: Event Modifier Order Matters
|
|
impact: MEDIUM
|
|
impactDescription: Modifier order affects event handling behavior - wrong order causes unexpected propagation or prevention
|
|
type: gotcha
|
|
tags: [vue3, events, modifiers, v-on, click, form]
|
|
---
|
|
|
|
# Event Modifier Order Matters
|
|
|
|
**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.
|
|
|
|
## Task Checklist
|
|
|
|
- [ ] Always consider modifier order when chaining multiple modifiers
|
|
- [ ] Use `.prevent.self` to prevent default on element AND children
|
|
- [ ] Use `.self.prevent` to prevent default ONLY on the element itself
|
|
- [ ] Test event behavior on both the element and its children
|
|
|
|
**Incorrect:**
|
|
```html
|
|
<!-- WRONG: Unintended behavior - prevents clicks on children too -->
|
|
<template>
|
|
<div @click.prevent.self="handleClick">
|
|
<button>Child Button</button> <!-- Default also prevented here! -->
|
|
</div>
|
|
</template>
|
|
```
|
|
|
|
```html
|
|
<!-- WRONG: Assuming order doesn't matter -->
|
|
<template>
|
|
<!-- Developer expects only self clicks to be handled -->
|
|
<!-- But .prevent runs first, affecting all clicks -->
|
|
<a href="/page" @click.prevent.self="navigate">
|
|
<span>Click me</span>
|
|
</a>
|
|
</template>
|
|
```
|
|
|
|
**Correct:**
|
|
```html
|
|
<!-- CORRECT: Only prevent default on the element itself -->
|
|
<template>
|
|
<div @click.self.prevent="handleClick">
|
|
<button>Child Button</button> <!-- Default NOT prevented here -->
|
|
</div>
|
|
</template>
|
|
```
|
|
|
|
```html
|
|
<!-- CORRECT: Prevent default on element and children -->
|
|
<template>
|
|
<form @submit.prevent.self="onSubmit">
|
|
<button type="submit">Submit</button>
|
|
</form>
|
|
</template>
|
|
```
|
|
|
|
```html
|
|
<!-- CORRECT: Explicit intent with separate handlers when needed -->
|
|
<template>
|
|
<div @click.self="handleSelfClick">
|
|
<button @click.prevent="handleChildClick">
|
|
Child with prevented default
|
|
</button>
|
|
</div>
|
|
</template>
|
|
```
|
|
|
|
## How Modifier Order Works
|
|
|
|
```javascript
|
|
// Vue compiles modifiers in order, so:
|
|
|
|
// @click.prevent.self compiles to:
|
|
// event.preventDefault()
|
|
// if (event.target !== event.currentTarget) return
|
|
// handler()
|
|
|
|
// @click.self.prevent compiles to:
|
|
// if (event.target !== event.currentTarget) return
|
|
// event.preventDefault()
|
|
// handler()
|
|
```
|
|
|
|
## Common Modifier Combinations
|
|
|
|
```html
|
|
<!-- Stop propagation AND prevent default -->
|
|
<a @click.stop.prevent="handleClick">Link</a>
|
|
|
|
<!-- Capture mode with once -->
|
|
<div @click.capture.once="handleOnce">...</div>
|
|
|
|
<!-- Only exact modifier key combination -->
|
|
<button @click.ctrl.exact="onCtrlClick">Ctrl+Click Only</button>
|
|
```
|
|
|
|
## Reference
|
|
- [Vue.js Event Handling - Event Modifiers](https://vuejs.org/guide/essentials/event-handling.html#event-modifiers)
|