Skip to content

Commit 78677e4

Browse files
authored
fix: align list of passive events with browser defaults, and add documentation (#12933)
closes #12639
1 parent 363a541 commit 78677e4

File tree

4 files changed

+16
-1
lines changed

4 files changed

+16
-1
lines changed

.changeset/famous-mirrors-count.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'svelte': patch
3+
---
4+
5+
fix: align list of passive events with browser defaults

documentation/docs/02-template-syntax/02-basic-markup.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,10 @@ Because events are just attributes, the same rules as for attributes apply:
112112

113113
Timing-wise, event attributes always fire after events from bindings (e.g. `oninput` always fires after an update to `bind:value`). Under the hood, some event handlers are attached directly with `addEventListener`, while others are _delegated_.
114114

115+
When using `onwheel`, `onmousewheel`, `ontouchstart` and `ontouchmove` event attributes, the handlers are [passive](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#using_passive_listeners) to align with browser defaults. This greatly improves responsiveness by allowing the browser to scroll the document immediately, rather than waiting to see if the event handler calls `event.preventDefault()`.
116+
117+
In the very rare cases that you need to prevent these event defaults, you should use [`on`](https://svelte-5-preview.vercel.app/docs/imports#svelte-events) instead (for example inside an action).
118+
115119
### Event delegation
116120

117121
To reduce memory footprint and increase performance, Svelte uses a technique called event delegation. This means that for certain events — see the list below — a single event listener at the application root takes responsibility for running any handlers on the event's path.

packages/svelte/src/utils.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,7 @@ export function is_dom_property(name) {
222222
return DOM_PROPERTIES.includes(name);
223223
}
224224

225-
const PASSIVE_EVENTS = ['wheel', 'touchstart', 'touchmove', 'touchend', 'touchcancel'];
225+
const PASSIVE_EVENTS = ['wheel', 'mousewheel', 'touchstart', 'touchmove'];
226226

227227
/**
228228
* Returns `true` if `name` is a passive event

sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,12 @@ This is [no longer true in Svelte 5](/#H4sIAAAAAAAAE4WQwU7DMAyGX8VESANpXe8lq9Q8A
238238
<svelte:component this={Thing} />
239239
```
240240

241+
### Touch and wheel events are passive
242+
243+
When using `onwheel`, `onmousewheel`, `ontouchstart` and `ontouchmove` event attributes, the handlers are [passive](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#using_passive_listeners) to align with browser defaults. This greatly improves responsiveness by allowing the browser to scroll the document immediately, rather than waiting to see if the event handler calls `event.preventDefault()`.
244+
245+
In the very rare cases that you need to prevent these event defaults, you should use [`on`](https://svelte-5-preview.vercel.app/docs/imports#svelte-events) instead (for example inside an action).
246+
241247
## Other breaking changes
242248

243249
### Stricter `@const` assignment validation

0 commit comments

Comments
 (0)