-
-
Notifications
You must be signed in to change notification settings - Fork 33.7k
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 #10778
Comments
In I’m not familiar with Vue’s source code, but does that mean that when the With regards to the feature request itself, I think “active” would be a natural choice here. |
nonPassive seems like the more logical opposite of passive.
vs
Any difference at all? which one wins? |
Any1 figure out a workaround to this? touchstart & conditionally setting preventDefault in the running code doesn't seem to work to cancel the event. |
In Vue 3, the following code generates a "passive : false" event listener attached to that
|
I think vue need this feature, otherwise modern browser will report tons of warnings, now edge/chrome need set the passive to true or false explictly in the addEventListener for some events, for example, touchstart, wheel and so on, otherwise it will report warnings, it is already disaster for me, I don't have easy way to solve it. Here is my code clip:
If I didn't use the v-on:touchstart/wheel, and handle these events with raw javascript DOM API addEventListener, there is so much effort for me, because the elements binding "touchstart" event in my project are dynamically created or destroyed by v-if. Can vue team consider adding a new modifier to pass event option with passive: false? |
@wangf1978 short term solution, you could add a ref and use vueuse's useEventListener(divRef, 'touchstart', eventCallback, { passive: true }) But I am unsure if that solution would work for you as I am unsure where some of your variables are coming from. |
@WORMSS Thanks for your wonderful solution, but it seems not to be so fit for my scenario: |
the <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 |
Even if it's true, then it doesn't do that in this case: |
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 fortouchstart
andtouchmove
events (reference). Thus, to be able to cancel one of these events by callinge.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:
What does the proposed API look like?
An event modifier that does the opposite of the
passive
event modifier, specifying the option asfalse
instead oftrue
.Unsure of the naming - perhaps
nonPassive
,active
,assertive
,intentional
.The text was updated successfully, but these errors were encountered: