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>
Note: This differs from the click event in that click is fired after a full click action occurs; that is, the mouse button is pressed and released while the pointer remains inside the same element. mousedown is fired the moment the button is initially pressed.
v-on will trigger the expression or the method specified when the click event in triggered on the button element.
. prevent is a modifier for v-on:click . Another handy modifier is . self , which tells Vue to only evaluate v-on:click if the element itself is clicked, as opposed to one of its children. For example, Vue only calls the below v-on:click handler when you click on the outer div , not the inner div .
Use addEventListener() method to register a mouse event handler. The event. button indicates which mouse button was pressed to trigger the mouse event.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With