Skip to content

Commit 8c90d23

Browse files
authored
Merge pull request #1349 from re-fort/add-description-about-event-modifier-passive
Add description and tip about `.passive` modifier
2 parents a68b645 + d60738c commit 8c90d23

File tree

1 file changed

+13
-0
lines changed

1 file changed

+13
-0
lines changed

src/v2/guide/events.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,19 @@ To address this problem, Vue provides **event modifiers** for `v-on`. Recall tha
205205

206206
Unlike the other modifiers, which are exclusive to native DOM events, the `.once` modifier can also be used on [component events](components.html#Using-v-on-with-Custom-Events). If you haven't read about components yet, don't worry about this for now.
207207

208+
> New in 2.3.0+
209+
210+
``` html
211+
<!-- the scroll event will not cancel the default scroll behavior -->
212+
<div v-on:scroll.passive="onScroll">...</div>
213+
```
214+
215+
In addition to these modifiers, Vue provides `.passive` modifier to improve the performance on mobile especially.
216+
For example, when performing a scroll, the browser will scroll after the process has completed because the browser doesn’t know if the event is going to call `event.preventDefault()` within its handler.
217+
`.passive` modifier can be used to tell the browser that this event will not cancel the default event behavior in advance.
218+
219+
<p class="tip">Don't use `.passive` and `.prevent` together. Passive handler can't prevent default event.</p>
220+
208221
## Key Modifiers
209222

210223
When listening for keyboard events, we often need to check for common key codes. Vue also allows adding key modifiers for `v-on` when listening for key events:

0 commit comments

Comments
 (0)