27

With Vue.js 2 when I add in an @click event to an element and attempt to click something, the event isn't triggered until after I have completed my click (press down -> up).

How do I trigger an event immediate after a mouse click down?

Example:

<div @click="foo()">
    Hello
</div>
Ben
  • 1,550
  • 3
  • 15
  • 22

1 Answers1

62

You can simply use @mousedown event on the element, just like @click, to handle the mousedown event.

<button @mousedown="mouseDown">
   mouseDown 
</button>

See working fiddle: https://fiddle.jshell.net/mimani/feL03wgd/

jdlm
  • 6,327
  • 5
  • 29
  • 49
Saurabh
  • 71,488
  • 40
  • 181
  • 244
  • That works, but I also have an `@contextmenu`... which `@mousedown` seems to trigger both left + right clicks. – Ben Feb 06 '17 at 05:46
  • @Ben Can you reproduce this in the fiddle. – Saurabh Feb 06 '17 at 06:05
  • https://fiddle.jshell.net/qtso6hqk/ But nevermind; mousedown technically is for either mouse downs. Thanks for the help Saurabh. – Ben Feb 06 '17 at 06:20
  • 5
    Fiddle is a broken link. – Michael Giovanni Pumo Feb 28 '20 at 14:18
  • 4
    Just to address the comment about @mousedown being triggered by left and right (and middle) clicks. You can use Vue's key modifiers to specify additional conditions to the event. For restricting mouse click events to left clicks only : '@mousedown.left' & '@mouseup.left' – Air Sep 17 '20 at 18:20
  • ( ignore the single quotes around the last two mouse events. Stackoverflow thought I was trying to reference a user, and says I can only reference one user in a comment ) – Air Sep 17 '20 at 18:23