Handle different click events on one element

Question

I am trying to implement a solution which allows to attach 3 different handlers to an element, but none should trigger the others.

Using https://v2.vuejs.org/v2/guide/events.html as reference

<div @click.ctrl="methodA" @click="methodB" @contextmenu.ctrl="methodC"></div>

I've tried using .stop modifier randomly on each but I am unable to prevent methodA to also trigger methodB when I click. What would be the right way/modifiers to use or would the order I attach the handlers matter?

Edit

https://codepen.io/anon/pen/JVrGKo

This question could be improved by adding a codepen or fiddle to be able to reproduce the error and to make the task of helping you easier. — Jair Reina
– Jair Reina, Commented Apr 14, 2019 at 13:43

tony19 · Accepted Answer · 2022-07-16 01:43:00Z

5

Interestingly enough, I created my own pen to test this and I could see the same thing you described in your questions happening in there as well, however with the pen you created I couldn't see that happening.

Anyhow, it does make sense that @click is triggered when @click.ctrl is triggered. But you can prevent that from happening by using the .exact modifier so the events get triggered only when the exact combination is used. Like this:

<div 
  @click.ctrl="methodA" 
  @click.exact="methodB"
  @contextmenu.ctrl="methodC"
></div>

Use this pen as an example

Let me know if that works.

edited Jul 16, 2022 at 1:43

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 14, 2019 at 15:03

Jair Reina

2,93527 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Wyxos Over a year ago

sad... I should have read the whole event page. I never saw the exact modifier before. Thanks for pointing it out.

Jair Reina Over a year ago

NP! Happens to me all the time.

Collectives™ on Stack Overflow

Handle different click events on one element

Edit

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edit

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related