1---
2title: Use .exact Modifier for Precise Keyboard/Mouse Shortcuts
3impact: MEDIUM
4impactDescription: Without .exact, shortcuts fire even when additional modifier keys are pressed, causing unintended behavior
5type: best-practice
6tags: [vue3, events, keyboard, modifiers, shortcuts, accessibility]
7---
8 
9# Use .exact Modifier for Precise Keyboard/Mouse Shortcuts
10 
11**Impact: MEDIUM** - By default, Vue's modifier key handlers (`.ctrl`, `.alt`, `.shift`, `.meta`) fire even when other modifier keys are also pressed. Use `.exact` to require that ONLY the specified modifiers are pressed, preventing accidental triggering of shortcuts.
12 
13## Task Checklist
14 
15- [ ] Use `.exact` when you need precise modifier combinations
16- [ ] Without `.exact`: `@click.ctrl` fires for Ctrl+Click AND Ctrl+Shift+Click
17- [ ] With `.exact`: `@click.ctrl.exact` fires ONLY for Ctrl+Click
18- [ ] Use `@click.exact` for plain clicks with no modifiers
19 
20**Incorrect:**
21```html
22<!-- WRONG: Fires even with additional modifiers -->
23<template>
24  <button @click.ctrl="copyItem">Copy</button>
25  <!-- Also fires on Ctrl+Shift+Click, Ctrl+Alt+Click, etc. -->
26 
27  <button @click.ctrl.shift="copyAll">Copy All</button>
28  <!-- User expects Ctrl+Shift, but also fires on Ctrl+Shift+Alt -->
29</template>
30```
31 
32```html
33<!-- WRONG: Conflicting shortcuts without .exact -->
34<template>
35  <div>
36    <button @click.ctrl="copy">Copy (Ctrl+Click)</button>
37    <button @click.ctrl.shift="copyAll">Copy All (Ctrl+Shift+Click)</button>
38    <!-- Both fire when user does Ctrl+Shift+Click! -->
39  </div>
40</template>
41```
42 
43**Correct:**
44```html
45<!-- CORRECT: Precise modifier matching with .exact -->
46<template>
47  <button @click.ctrl.exact="copyItem">Copy (Ctrl only)</button>
48  <!-- Only fires on Ctrl+Click, not Ctrl+Shift+Click -->
49 
50  <button @click.ctrl.shift.exact="copyAll">Copy All (Ctrl+Shift only)</button>
51  <!-- Only fires on Ctrl+Shift+Click, not Ctrl+Shift+Alt+Click -->
52</template>
53```
54 
55```html
56<!-- CORRECT: Plain click without any modifiers -->
57<template>
58  <button @click.exact="selectItem">Select</button>
59  <!-- Only fires when NO modifier keys are pressed -->
60  <!-- Ctrl+Click, Shift+Click, etc. will NOT trigger this -->
61</template>
62```
63 
64```html
65<!-- CORRECT: Non-conflicting shortcuts -->
66<template>
67  <div class="editor">
68    <div
69      @click.exact="selectItem"
70      @click.ctrl.exact="addToSelection"
71      @click.shift.exact="extendSelection"
72      @click.ctrl.shift.exact="selectRange"
73    >
74      Click, Ctrl+Click, Shift+Click, or Ctrl+Shift+Click
75    </div>
76  </div>
77</template>
78```
79 
80## Behavior Comparison
81 
82```javascript
83// WITHOUT .exact
84@click.ctrl="handler"
85// Fires when: Ctrl+Click, Ctrl+Shift+Click, Ctrl+Alt+Click, Ctrl+Shift+Alt+Click
86// Does NOT fire: Click (without Ctrl)
87 
88// WITH .exact
89@click.ctrl.exact="handler"
90// Fires when: ONLY Ctrl+Click
91// Does NOT fire: Ctrl+Shift+Click, Ctrl+Alt+Click, Click
92 
93// ONLY .exact (no other modifiers)
94@click.exact="handler"
95// Fires when: Plain click with NO modifiers
96// Does NOT fire: Ctrl+Click, Shift+Click, Alt+Click
97```
98 
99## Practical Example: File Browser Selection
100 
101```vue
102<template>
103  <ul class="file-list">
104    <li
105      v-for="file in files"
106      :key="file.id"
107      @click.exact="selectSingle(file)"
108      @click.ctrl.exact="toggleSelection(file)"
109      @click.shift.exact="selectRange(file)"
110      @click.ctrl.shift.exact="addRangeToSelection(file)"
111      :class="{ selected: isSelected(file) }"
112    >
113      {{ file.name }}
114    </li>
115  </ul>
116</template>
117 
118<script setup>
119// Each click type has distinct, non-overlapping behavior
120function selectSingle(file) {
121  // Clear selection and select only this file
122}
123 
124function toggleSelection(file) {
125  // Add or remove this file from current selection
126}
127 
128function selectRange(file) {
129  // Select all files from last selected to this one
130}
131 
132function addRangeToSelection(file) {
133  // Add range to existing selection
134}
135</script>
136```
137 
138## Keyboard Shortcuts with .exact
139 
140```html
141<template>
142  <div
143    tabindex="0"
144    @keydown.ctrl.s.exact.prevent="save"
145    @keydown.ctrl.shift.s.exact.prevent="saveAs"
146    @keydown.ctrl.z.exact.prevent="undo"
147    @keydown.ctrl.shift.z.exact.prevent="redo"
148  >
149    <!-- Each shortcut is precisely defined -->
150  </div>
151</template>
152```
153 
154## Reference
155- [Vue.js Event Handling - .exact Modifier](https://vuejs.org/guide/essentials/event-handling.html#exact-modifier)
156