Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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> 
like image 641
Ben Avatar asked Feb 05 '17 23:02

Ben


People also ask

What is the difference between Mousedown and click?

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.

What is the shorthand way to invoke a function when a click event is fired?

v-on will trigger the expression or the method specified when the click event in triggered on the button element.

What is click prevent Vuejs?

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

Which event handler is used to trigger with the help of mouse actions?

Use addEventListener() method to register a mouse event handler. The event. button indicates which mouse button was pressed to trigger the mouse event.


1 Answers

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/

like image 144
Saurabh Avatar answered Sep 28 '22 04:09

Saurabh