vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
45.61k stars 8k forks source link

when using `withModifiers`, the `capture` modifier is ineffective. #11226

Closed Aaron-zon closed 1 week ago

Aaron-zon commented 1 week ago

Vue version

3.4.30

Link to minimal reproduction

https://play.vuejs.org/#eNqFUk1vwjAM/SteLilSBQJ2QoC0IQ6btA9tuy07VMVAIE2iJAUk1P8+t6XAEGKXKH7P8Xu2s2cP1rY3ObIBG/rUSRvAY8jtWGiZWeMC7GEZw1aG5YuZyblE56GAuTMZcHrHhU6N9gGmqgsjiFowGsMy4jO54THshQYweqJkuh4cyAoDSBS6EHFUXd4qkULoIqYqvahF8alq77+qf6xF1zV6B40Yvnma2JA75D8EVYr9C8X+bUWiLsv3z1vgVdZdCQ079UhpmBQEzKxKAlIEMKR5jYed8izzzjgWs+DJy1wu2itvNG2m0hMsNZmVpPlmgySvgg0aJ4IlSpntc4UFl2Pc4OkS0/UVfOV3JSbYu0OPboOCHbmQuAWGmp5+vuKO7kcyM7NcUfYN8gO9UXnpsU57zPWMbJ/lVW6fqv8l9eLLT3cBtW+aKo3W66r7pm82udH6yW6/fd/sgRW/e2rmdg==

Steps to reproduce

Clicking on Click! in the screen will trigger an alert popup, following the event bubbling order: el3 -> el2 -> el1. In el2's onClick, use withModifiers and add the modifier ['capture']. The expected correct order should be: el2 -> el3 -> el1. However, the current order is: el3 -> el2 -> el1.

What is expected?

the order of the alert popups is: el2 -> el3 -> el1.

What is actually happening?

The current order of the alert popups is: el3 -> el2 -> el1. The capture modifier did not take effect.

System Info

No response

Any additional comments?

No response

Aaron-zon commented 1 week ago

the changes in #10856 restricted the allowed modifiers for withModifiers, and currently, capture is not included. Will capture be added later, or is it not allowed to be used with withModifiers?

Alfred-Skyblue commented 1 week ago

The capture, once, and passive parameters are native event options and are not handled in withModifiers.

https://github.com/vuejs/core/blob/261fb7ced144363947213af7be72ad9cbef0056f/packages/runtime-dom/src/directives/vOn.ts#L26-L42

capture, once, and passive:

https://github.com/vuejs/core/blob/261fb7ced144363947213af7be72ad9cbef0056f/packages/runtime-dom/src/modules/events.ts#L70-L84