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

[Aaron-zon]

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]

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]

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

core/packages/runtime-dom/src/directives/vOn.ts

Lines 26 to 42 in 261fb7c

	const modifierGuards: Record<
	ModifierGuardsKeys,
	(e: Event, modifiers: string[]) => void | boolean
	> = {
	stop: e => e.stopPropagation(),
	prevent: e => e.preventDefault(),
	self: e => e.target !== e.currentTarget,
	ctrl: e => !(e as KeyedEvent).ctrlKey,
	shift: e => !(e as KeyedEvent).shiftKey,
	alt: e => !(e as KeyedEvent).altKey,
	meta: e => !(e as KeyedEvent).metaKey,
	left: e => 'button' in e && (e as MouseEvent).button !== 0,
	middle: e => 'button' in e && (e as MouseEvent).button !== 1,
	right: e => 'button' in e && (e as MouseEvent).button !== 2,
	exact: (e, modifiers) =>
	systemModifiers.some(m => (e as any)[`${m}Key`] && !modifiers.includes(m)),
	}

capture, once, and passive:

core/packages/runtime-dom/src/modules/events.ts

Lines 70 to 84 in 261fb7c

	const optionsModifierRE = /(?:Once|Passive|Capture)$/
	function parseName(name: string): [string, EventListenerOptions | undefined] {
	let options: EventListenerOptions | undefined
	if (optionsModifierRE.test(name)) {
	options = {}
	let m
	while ((m = name.match(optionsModifierRE))) {
	name = name.slice(0, name.length - m[0].length)
	;(options as any)[m[0].toLowerCase()] = true
	}
	}
	const event = name[2] === ':' ? name.slice(3) : hyphenate(name.slice(2))
	return [event, options]
	}