Add non-passive event modifier

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 for touchstart and 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>

[kleinfreund]

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.

[WORMSS]

the divRef would be what links the elements, the events would be added/removed as soon as the elements are added/removed from the dom. (it will internally add a watcher on divRef and when it changes, does what it needs to to add the event.

<template>
  <div
    ref="divRef"
    v-if="condition"
    @click="yourevent"
 />

<script setup>
  import { unref } from 'vue';
  import { useEventListener } from '@vueuse/core';
  const divRef = ref(null);
  const eventCallback = (evt) => {
      on_toggle_photo_checkbox(unref(img), true, evt, unref(imgTypePos) + unref(start_list_idx_in_vw));
  };
  useEventListener(divRef, 'touchstart', eventCallback, { passive: true });
</script>

again, I’ve had to guesstimate some of this, so just assumed most of it are refs/computed, but unref doesn’t care if it’s a value/ref/computed, it will get the value regardless.