Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow opt-out of Chrome's passive event listener 'intervention' #2068

Closed
Rich-Harris opened this issue Feb 7, 2019 · 5 comments
Closed

Allow opt-out of Chrome's passive event listener 'intervention' #2068

Rich-Harris opened this issue Feb 7, 2019 · 5 comments

Comments

@Rich-Harris
Copy link
Member

@Rich-Harris Rich-Harris commented Feb 7, 2019

Chrome have decided to break the web by assuming that touch/wheel events are passive unless you explicitly pass passive: false. Aside from philosophical concerns about breaking older apps that are no longer maintained, this makes life harder for Svelte, since there's no way to declaratively state that an event listener should be non-passive:

<!-- we can state that we're passive... -->
<div on:touchstart|passive={handler}>...</div>

<!-- or we can leave it ambiguous... -->
<div on:touchstart={handler}>...</div>

<!-- but there's no option for 'i need to use preventDefault' -->

Possible solution: add an active modifier:

<!-- signals that `handler` calls `event.preventDefault()` -->
<div on:touchstart|active={handler}>...</div>
@TJKoury
Copy link

@TJKoury TJKoury commented Mar 3, 2019

I'm a fan of the active modifier. This is a modifier that will be a pain to add independently to each event, but for those times where it is necessary for specific use-cases involving cancelable touch events, it would be useful to have it.

@RamIdeas
Copy link

@RamIdeas RamIdeas commented Mar 18, 2020

Adding an extra use-case: I have a scroll listener that needs to be synchronous so I need to specify passive: false.

Small note: rather than active as the modifier name, nonpassive would be more explicit of what it is doing

@filipot
Copy link
Contributor

@filipot filipot commented Aug 18, 2020

I need this in order to move an element by touch while preventing scrolling in sapper.
Due to "Unable to preventDefault inside passive event listener due to target being treated as passive."

I vote for nonpassive

@filipot filipot mentioned this issue Aug 18, 2020
3 of 4 tasks complete
@filipot
Copy link
Contributor

@filipot filipot commented Aug 18, 2020

Oops, I was able to solve my issue with touch-action:none

@Conduitry
Copy link
Member

@Conduitry Conduitry commented Sep 24, 2020

Version 3.27.0 now has a |nonpassive event modifier that can be used to pass passive: false to addEventListener.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

7 participants
You can’t perform that action at this time.