1---
2title: Never Use .passive and .prevent Together
3impact: HIGH
4impactDescription: Conflicting modifiers cause .prevent to be ignored and trigger browser warnings
5type: gotcha
6tags: [vue3, events, modifiers, scroll, touch, performance]
7---
8 
9# Never Use .passive and .prevent Together
10 
11**Impact: HIGH** - The `.passive` modifier tells the browser you will NOT call `preventDefault()`, while `.prevent` does exactly that. Using them together causes `.prevent` to be ignored and triggers browser console warnings. This is a logical contradiction that leads to broken event handling.
12 
13## Task Checklist
14 
15- [ ] Never combine `.passive` and `.prevent` on the same event
16- [ ] Use `.passive` for scroll/touch events where you want better performance
17- [ ] Use `.prevent` when you need to stop the default browser action
18- [ ] If you need conditional prevention, handle it in JavaScript without `.passive`
19 
20**Incorrect:**
21```html
22<!-- WRONG: Conflicting modifiers -->
23<template>
24  <div @scroll.passive.prevent="handleScroll">
25    <!-- .prevent will be IGNORED -->
26    <!-- Browser shows warning -->
27  </div>
28</template>
29```
30 
31```html
32<!-- WRONG: On touch events -->
33<template>
34  <div @touchstart.passive.prevent="handleTouch">
35    <!-- Cannot prevent default - passive already promised not to -->
36  </div>
37</template>
38```
39 
40```html
41<!-- WRONG: On wheel events -->
42<template>
43  <div @wheel.passive.prevent="handleWheel">
44    <!-- Broken: will scroll anyway despite .prevent -->
45  </div>
46</template>
47```
48 
49**Correct:**
50```html
51<!-- CORRECT: Use .passive for performance (no prevention needed) -->
52<template>
53  <div @scroll.passive="handleScroll">
54    <!-- Good for scroll tracking without blocking -->
55  </div>
56</template>
57```
58 
59```html
60<!-- CORRECT: Use .prevent when you need to prevent default -->
61<template>
62  <form @submit.prevent="handleSubmit">
63    <!-- Correctly prevents form submission -->
64  </form>
65</template>
66```
67 
68```html
69<!-- CORRECT: For touch events where you need to prevent -->
70<template>
71  <div @touchmove="handleTouchMove">
72    <!-- Handle prevention conditionally in JS -->
73  </div>
74</template>
75 
76<script setup>
77function handleTouchMove(event) {
78  if (shouldPreventScroll.value) {
79    event.preventDefault()
80  }
81  // ... handle touch
82}
83</script>
84```
85 
86## Understanding .passive
87 
88```javascript
89// .passive tells the browser:
90// "I promise I won't call preventDefault()"
91 
92// This allows the browser to:
93// 1. Start scrolling immediately without waiting for JS
94// 2. Improve scroll performance, especially on mobile
95// 3. Reduce jank and stuttering
96 
97// Equivalent to:
98element.addEventListener('scroll', handler, { passive: true })
99```
100 
101## When to Use .passive
102 
103```html
104<!-- Good use cases for .passive -->
105 
106<!-- Scroll tracking analytics -->
107<div @scroll.passive="trackScrollPosition">
108 
109<!-- Touch gesture detection (no prevention needed) -->
110<div @touchmove.passive="detectGesture">
111 
112<!-- Wheel event monitoring -->
113<div @wheel.passive="monitorWheel">
114```
115 
116## When to Use .prevent (Without .passive)
117 
118```html
119<!-- Good use cases for .prevent -->
120 
121<!-- Form submission -->
122<form @submit.prevent="handleSubmit">
123 
124<!-- Link clicks with custom navigation -->
125<a @click.prevent="navigate">
126 
127<!-- Preventing context menu -->
128<div @contextmenu.prevent="showCustomMenu">
129```
130 
131## Browser Warning
132 
133When you combine `.passive` and `.prevent`, the browser console shows:
134```
135[Intervention] Unable to preventDefault inside passive event listener
136due to target being treated as passive.
137```
138 
139## Reference
140- [Vue.js Event Handling - Event Modifiers](https://vuejs.org/guide/essentials/event-handling.html#event-modifiers)
141- [MDN - Improving scroll performance with passive listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners)
142