pkf1994 / pengithub-vue

0 stars 1 forks source link

Add non-passive event modifier #4

Open czf1998 opened 4 years ago

czf1998 commented 4 years ago

### 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 passiveevent modifier, specifying the option as falseinstead of true.

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

<div
  @touchstart.active="start"
  @touchmove.active="move"
></div>
phb1972 commented 4 years ago

Invue/src/core/vdom/helpers/update-listeners.js:22, normalizeEventalways returns an object with a set passiveproperty.

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 commented 4 years ago

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)