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

Add non-passive event modifier #4

Open
czf1998 opened this issue Dec 24, 2019 · 2 comments
Open

Add non-passive event modifier #4

czf1998 opened this issue Dec 24, 2019 · 2 comments
Assignees
Labels
documentation Improvements or additions to documentation good first issue Good for newcomers
Milestone

Comments

@czf1998
Copy link

czf1998 commented Dec 24, 2019

### What problem does this feature solve?
An event modifier to support passive events was added in #5132.

In the last couple of years, browsers have adopted the passive behavior by default fortouchstartand touchmove events (reference). Thus, to be able to cancel one of these events by calling e.preventDefault(), you need to explicitly pass { passive: false } when adding the event listener.

With the current API this is impossible to achieve in a Vue template (as far as I can tell). You must manually add and remove the event listener in a component hook like so:

this.$refs.someElement.addEventListener('touchstart', this.start, { passive: false });
this.$refs.someElement.addEventListener('touchmove', this.move, { passive: false });

// later
this.$refs.someElement.removeEventListener('touchstart', this.start);
this.$refs.someElement.removeEventListener('touchmove', this.move);

### What does the proposed API look like?
An event modifier that does the opposite of the passive event modifier, specifying the option as false instead of true.

Unsure of the naming - perhaps nonPassive, active, assertive, intentional.

<div
  @touchstart.active="start"
  @touchmove.active="move"
></div>
@pkf1994 pkf1994 added documentation Improvements or additions to documentation good first issue Good for newcomers labels Dec 24, 2019
@phb1972
Copy link

phb1972 commented Dec 24, 2019

In vue/src/core/vdom/helpers/update-listeners.js:22, normalizeEvent always returns an object with a set passive property.

I’m not familiar with Vue’s source code, but does that mean that when the .passive modifier is not present, each event handler is always declared as active? This seems wrong in the light of browser’s changing the default for certain event types to be passive by default (see Improving scrolling performance with passive listeners). If .passive is not present, I don’t expect event handlers to be marked as not passive.

With regards to the feature request itself, I think “active” would be a natural choice here.

@phb1972
Copy link

phb1972 commented Dec 24, 2019

Vue looks at exactly what the browser can support by examining the style property of a div. You should not prefix style properties yourself.

Detection logic here: src/platforms/web/runtime/modules/style.js (line 32: normalize)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

3 participants