fix(event): addEventListener set passive option to false by default

[btea]

When I bind the wheel event to the input, and then call e.preventDefault() to prevent the default event under certain circumstances, a warning message will appear on the console.

example

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	90.8 kB (+11 B)	34.5 kB (+4 B)	31.1 kB
vue.global.prod.js	148 kB (+11 B)	53.8 kB (+6 B)	48 kB (+5 B)

Usages

Name	Size	Gzip	Brotli
createApp	50.8 kB (+11 B)	19.9 kB (+3 B)	18.1 kB (+5 B)
createSSRApp	54.2 kB (+11 B)	21.2 kB (+3 B)	19.3 kB (+1 B)
defineCustomElement	53.1 kB (+11 B)	20.6 kB (+4 B)	18.8 kB (+9 B)
overall	64.5 kB (+11 B)	24.9 kB (+2 B)	22.5 kB (-20 B)

[ferferga]

What you want is @wheel.prevent. See https://vuejs.org/guide/essentials/event-handling.html#event-modifiers

[btea]

No, the prevent modifier will prevent all default behaviors, but the scenario I need is to prevent the default behavior under specific conditions. You can check out the example I provided above.

[baiwusanyu-c]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
language-tools	❌ failure	✅ success
nuxt	❌ failure	✅ success
pinia	✅ success	✅ success
primevue	✅ success	✅ success
quasar	✅ success	✅ success
radix-vue	✅ success	✅ success
router	✅ success	✅ success
test-utils	✅ success	✅ success
vant	✅ success	✅ success
vite-plugin-vue	✅ success	✅ success
vitepress	✅ success	✅ success
vue-i18n	✅ success	✅ success
vue-macros	✅ success	✅ success
vuetify	❌ failure	❌ failure
vueuse	✅ success	✅ success
vue-simple-compiler	✅ success	✅ success

[baiwusanyu-c]

LGTM

[yyx990803]

I'm not sure if I understand your problem, in what browsers are these warnings shown? I can't reproduce them.

[btea]

It can be reproduced on both chrome and edge. You should click on the Show console sidebar icon and then select verbose as shown below:

[yyx990803]

From my understanding:

• You either make the event passive (which means you can't preventDefault())
• Or you preventDefault() on the event which is not passive (and get the warning)

So the point of this PR is just to suppress the warning but the code is still doing what it warns you against. If that's the case, I don't think this PR makes sense. Vue should not default to hiding meaningful warnings.

[btea]

Yes, the above modifications are only for handling warning messages.
For this scenario, if I want to solve this warning message, then I can only manually bind the event el.addEventListener('wheel', fn, { passive: false }) myself, and cannot rely on Vue's event binding mechanism to solve it (it seems there is no way to set passive: false).