Vue.js ships with a few pre-defined events that allow you to capture an input from a user’s mouse, be it clicking on an element, hovering over it, scrolling, etc. Using these you can provide a greater level of interaction with your Vue website/web app. In this post I will go over some of these mouse events that you have at your disposal when using Vue.js.
With the use of the v-on directive, you can listen to the user’s input events such as keypresses, mouse events, etc.
v-on:click
The main mouse event that you’ll generally be using is the click event. When you call this, you simply pass in the name of a function to be called upon clicking the element. Here’s an example:
In this example, v-on:click="showAlert" is used in the HTML side. And this on:click event can be included as a property on any HTML element, not just buttons or anchor tags. And the showAlert passed in is the function called upon clicking this button. Then below, in the methods section of the JavaScript, the showAlert function is defined. This function simply just displays an alert, to show that the button has been clicked.
This v-on:click can also be extended further than just listening to a single click. Modifiers can be used to specify the mouse button, for example. v-on:click.left restricts the event to only listen to clicks that are specifically using the left mouse button, v-on:click.right restricts the event to specifically the right mouse button, and v-on:click.middle only listens to a click of the middle mouse button.
A parameter can also be passed into this method to make the value available in the code executed within the method. An example of this is here:
If you could take a look at the HTML here, the function showAlert that’s called has the data attribute of name passed into it; and the name value is defined in the JavaScript within data, set to a string value. So in the declaration of the method, the value is being passed in, and then being used in the text for the alert. So now when I click the button, I get a nice personal message addressing me by name!
Another way the click event can be extended is with event modifiers which can specify the behaviour of the DOM when executing the events. The event modifiers available to you when using v-on include:
| v-on:click.stop | Will isolate the event to this element and will not listen to click events higher up the DOM tree |
| v-on:click.prevent | Will prevent the default behaviour of the element this is on |
| v-on:click.capture | The event listener will be added in capture mode |
| v-on:click.self | This will only trigger if the target of the event being called is the element itself |
| v-on:click.once | With once, the method will only run once in one instance of the page |
These modifiers can be used in conjunction with one another; for example, to use .stop and .prevent on the same event listener, you would use v-on:click.stop.prevent . This will prevent clicks on only this element. The order is an important factor when chaining modifiers. If the order of this was v-on:click.prevent.stop, then the click would be prevented on all of the preceding elements in the DOM tree first, and then the event would be isolated to this specific element.
v-on:mouseover
The mouseover event would be used to call a method when the cursor is hovered over an element. The implementation of this is pretty much identical to the implementation of the click event, only the word mouseover is used instead of click.
In this example, the method to display an alert is called when hovering over the button. As with the click event, this can be used on any HTML element and can call a JavaScript method to execute any code you want to. The same data can be passed in and accessed by a method the same way.
The event modifiers (.stop, .prevent, .capture, etc.) explained earlier can also be used on a mouseover event and will behave identically. For example, when using the .prevent modifier on the mouseover event handler, you would use v-on:mouseover.prevent="showAlert" .
For information on the mouse events available to you in Angular 4/5, you can view the article here:
