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: left, middle, and 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.

leftmiddleright
onclick
oncontextmenu
ondblclick
onmousedown
onmouseenter
onmouseleave
onmouseleave
onmousemove
onmouseover
onmouseout
onmouseup
table 1: Modifier support for mouse-related events


From this table, you can see that only the onmousedown and onmouseup events 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 onclick event was only supported by the left modifier. 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 left, middle, and right mouse modifiers in Vue.js. The demo to complement this post can be found here.

Considering the Left Mouse Button

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

<div v-on:mousedown.left="onDivClick">
  Use the left mouse button in this area.
</div>

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

The middle modifier helps you respond to a user interacting with the middle mouse button. This modifier works with both the onmousedown and onmouseup events. For example, here is the middle modifier in use with the onmousedown event.

<div v-on:mousedown.middle="onDivClick">
  Use your middle mouse button in this area.
</div>

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

The 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 onmousedown and onmouseup events. To use the right modifier, you can apply it to a div element like this:

<div v-on:mousedown.right="onDivClick">
  Use the right mouse button in this area.
</div>

The 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 onmousedown or 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.


Comments

comments powered by Disqus

Chad Campbell
Chad Campbell

Chad is an independent software professional. He has been named a Microsoft MVP five times. His books have been translated into multiple languages and distributed worldwide. He holds a computer science degree from Purdue University, where he also studied psychology.

Chad has built sites, apps, frameworks, libraries, and platforms using Java, .NET, and Node. He's ran his own startups and has created software for Fortune 100 companies. In short, Chad knows how to create software. From ideation to delivery. From start-to-finish.


Related Content

Follow Chad Online