How do I add separate listeners for shift-click and normal click in v2.1.0?

Was happy to see the new Mouse Event Modifiers in v2.1.0 as I have several places in my app where I have to perform different actions when the shift key is pressed. However my happiness turned to disappointment when I tried to use it. Basically if I do this:

<button @click="someAction" @click.shift="someOtherAction">

both actions fire when shift is pressed. I thought putting the shifted listener first with the stop modifier might work but it doesn’t.

Am I missing something? Maybe Vue need an unmodified modifier or something similar?

1 Like

can you tell what order they get fired in? Perhaps you can do an event.preventDefault or the like on the shift action

I tried that. I put stop and prevent on both listeners, and tried swapping the order, but still same behavior.

AFAIK stop and prevent act on the click event itself and have nothing to do with the modifier. Can’t you write this?

<button @click="handle($event)">
handle(e) {
  if (e.shiftKey) this.someOtherAction()
  else this.someAction()
}

Yeah, that’s exactly what I’m doing now! I just wanted to use the new mouse event modifiers to abstract away the e.shiftKey check, because I prefer as much DOM logic as possible to be handled by Vue.

Hey just wanted to chime in and +1 this issue. This seems to be applicable to all other “Modifier Keys” (CTRL, ALT, SHIFT, META).

At first it seemed like a great shortcut to augment the controls of certain input with a modifier key, but if we have to handle the event ourselves (to support actions WITHOUT the modifier pressed) it kinda defeats the purpose.

Was the @click.[modifier-key]="methodName" notation intended only for cases where the user would only use the modifier and never without? Seems like that would be an infrequent scenario, no?

2 Likes

Sorry for reviving an old thread - but it didn’t look like any conclusion was reached. I just got caught by this, but thinking about it, allowing all combinations does lead to some ambiguity.

If you define just @click, then all click events will go to that handler, regardless of modifier keys. Now suppose you define @click and @click.shift. Where should Alt+Click be handled? in the handler for @click? Or not at all (just ignored)?

I think until that’s decided and specified, it’s safer to just test the event in your single handler function, but the current behaviour of triggering both handlers does seem like the least dseireable - i.e. if I defined @click and @click.shift, then Shift+Click shouldn’t trigger the @click handler…

Hi,

I came across this problem as well. My solution is not to declare any modifiers on the click. I just declare @click=“add” and than in my code I treat the click method like this:

add() {
    let value = 1;
     if(event.shiftKey) {
         value = 10;
      }
     this.property += value; 
 }

Just for your information, because this is one of the first search results on google.

It is now possible to use exact modifiers.

In my case I am using following modifiers:

For just left click:
@click.left.exact="clicked"

For Shift left click:
@click.shift.left.exact="selectClick"

9 Likes

You can also use global shift event

@keydown.enter.shift.exact="onSave"