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

Question

With Vue.js 2, when I add an @click event to an element and try to click something, the event does not fire until I finish my click (press down → up).

How can I trigger an event right after a mouse click?

Example:

<div @click="foo()"> Hello </div> 

Answer 1

You can simply use the @mousedown event for an element, like @click , to handle the mounsedown event.

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

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