CODEWITHSUNDEEP
vue.jsevent-handlingaddeventlistener
Wyxos
Wyxos

Reputation: 595

Handle different click events on one element

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

Upvotes: 2

Views: 476

Answers (1)

Jair Reina
Jair Reina

Reputation: 2915

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.

Upvotes: 5

Related Questions