Skip to content
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

Event's .stop does not prevent the propagation #3643

Closed
AlttiRi opened this issue Apr 21, 2021 · 2 comments
Closed

Event's .stop does not prevent the propagation #3643

AlttiRi opened this issue Apr 21, 2021 · 2 comments

Comments

@AlttiRi
Copy link

AlttiRi commented Apr 21, 2021

Version

3.0.11

Reproduction link

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiP...

Steps to reproduce

  1. Click with the left mouse button on the button.
  2. Click with the left mouse button with pressed shift on the button.
  3. Click with the right mouse button on the button.
  4. Click with the right mouse button with pressed shift on the button.
  5. Click with the middle mouse button on the button.
  6. Click with the middle mouse button with pressed shift on the button.

What is expected?

click
click + shift
right click
right click + shift
middle click
middle click + shift

What is actually happening?

click
click + shift
click                    <--- Here is it
right click
right click + shift
middle click
middle click + shift

.stop does not run stopImmediatePropagation to stop propagation to the follow listeners


@click.shift.stop="callback('click + shift')" // .stop has no effect
@click="callback('click')"

I expect that this code will run stopImmediatePropagation() on click events with shift modifier.

The workaround is to manually run stopImmediatePropagation. For example:

@click.shift="$event.stopImmediatePropagation(), callback('click + shift')"
@click="callback('click')"
@edison1105
Copy link
Member

another workaround

@click.shift.stop="callback('click + shift')"  
-@click="callback('click')"
+@click.exact="callback('click')"

see https://v3.vuejs.org/guide/events.html#exact-modifier

@HcySunYang
Copy link
Member

Duplicate of #916

Modifier .stop is equivalent to e.stopPropagation(), not e.stopImmediatePropagation(). But yep, you need to manually execute the e.stopImmediatePropagation() function

@github-actions github-actions bot locked and limited conversation to collaborators Oct 21, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants