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

event-handling mouseevent vue.js vuejs2
Ben picture Ben · Feb 6, 2017 · Viewed 37.6k times · Source

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>

Answer

Saurabh picture Saurabh · Feb 6, 2017

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/

Related questions

Handle mouse event anywhere with JavaFX

I have a JavaFX application, and I would like to add an event handler for a mouse click anywhere within the scene. The following approach works ok, but not exactly in the way I want to. Here is a sample …

Read More
Global mouse event handler

I have the following code which I got from somewhere to capture mouse events. I modified it and made an event handler so that I can subscribe to it. The mouse events are captured correctly. But it never fires the …

Read More
Javascript click and mousedown conflicting

I have a certain scenario where I'm using click to insert a div and then mousedown on that div for dragging it around. I have bound the click to the parent container, and the mousedown on the div itself. But …

Read More