Explaining the Mouse Modifiers in Vue.js
- Estimated read time: 5 min read
- Written by Chad Campbell on May 14th 2017
Vue.js provides modifiers to refine the behavior of events. In relation to this post, Vue has three modifiers specific to the mouse:
right. While incredibly handy, their impact can occasionally differ from what you might expect. The reason why is because Vue's mouse modifiers don't support all mouse-related events.
The HTML DOM has ten mouse-related events. If we look at the events that each of Vue.js's modifiers supports, we get the following table.
From this table, you can see that only the
onmouseupevents work with all three modifiers. When I was experimenting with this stuff, while creating my Vue.js training course, I found something interesting. I noticed that the
onclickevent was only supported by the
leftmodifier. This surprised me. It made me want to examine the mouse modifiers more closely.
In the rest of this post, I'm going to dive deeper into each of the mouse buttons. This post will explain the
right mouse modifiers in Vue.js. The demo to complement this post can be found here.
Considering the Left Mouse Button
left modifier helps you respond to a user interacting with the left mouse button. For example, imagine that there’s an area on the web page that you want to react to the user clicking on. However, you want to make sure that the click is coming from the left mouse button. To do that, you could use the
left modifier, like this.
This block of code attaches the
left modifier to the
onmousedown event. This event is fired when the user presses any mouse button on the
left modifier prevents the
onDivClick event from firing unless the event was performed via the left mouse button. This behavior is similar to if you used the
onclick event. After all, the HTML DOM's
onclick event only fires if the event is performed via the left mouse button. In other words, using the
left modifier with the
onclick event is redundant and unneccessary.
Considering the Middle Mouse Button
middle modifier helps you respond to a user interacting with the middle mouse button. This modifier works with both the
onmouseup events. For example, here is the
middle modifier in use with the
This snippet is provided for completeness. Personally, I've never needed to respond to a user clicking just the middle mouse button. Still, I wanted to share it for completeness in this post.
Considering the Right Mouse Button
right modifier helps you respond to a user interacting with the right mouse button. Similar to the other modifiers, the
right modifier works with the
onmouseup events. To use the
right modifier, you can apply it to a
div element like this:
right modifier can be useful if you want to create a custom context menu in your app. I actually show you how to do this in my Vue.JS training course. Still, the
right modifier prevents the
onDivClick event form firing unless the event was performed via the right mouse button. Instead of using this approach though, you could use the
oncontextmneu event. While you can use the
right modifier with the
oncontextmenu event, you don't have to. That's why it's marked with the bi-directional arrows in the table above.
In short, the mouse modifiers are only needed if you use the
onmouseup events. To play around with the events and the modifiers themselves, please review the demo.
I hope you found this post helpful. To learn more about Vue, check out my Vue.JS: Getting Started training course on Pluralsight. If you don't have a Pluralsight subscription, I'd like to offer you a free trial. Either way, the training course will help you get going with Vue.js.
If there are other topics you're interested in, please feel free to mention them in the comments below. Thanks for reading.