event-handlingmouseeventvue.jsvuejs2

Vue.js - event handling with on-mouse-click down (and not up)

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>
Solution

  • 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/