Mouse button modifiers in Vue - Step-by-Step Execution

Concept Flow - Mouse button modifiers

User clicks mouse

↓

Vue event listener detects click

↓

Check mouse button modifier

↓

Run left

↓

Execute handler based on button

When a user clicks, Vue listens for the event, checks which mouse button was pressed, and runs the matching handler.

Execution Sample

Vue

<template>
  <button @click.left="onLeftClick" @click.right.prevent="onRightClick">Click me</button>
</template>

<script setup>
function onLeftClick() { alert('Left click!') }
function onRightClick() { alert('Right click!') }
</script>

This Vue button runs different functions depending on left or right mouse clicks.

Execution Table

Step	Mouse Button Clicked	Modifier Detected	Handler Called	Prevent Default
1	Left	click.left	onLeftClick	No
2	Right	click.right	onRightClick	Yes (prevented)
3	Middle	No matching modifier	No handler	No

💡 No handler runs if the mouse button modifier does not match any listener.

Variable Tracker

Variable	Start	After Left Click	After Right Click	After Middle Click
Handler Called	None	onLeftClick	onRightClick	None
Prevent Default	False	False	True	False

Key Moments - 2 Insights

Why doesn't the middle mouse button trigger any handler?

Because the code only listens for .left and .right modifiers, so middle clicks have no matching handler (see execution_table row 3).

What does the .prevent modifier do on the right click?

It stops the browser's default context menu from showing on right click, as shown by 'Prevent Default' being Yes in execution_table row 2.

Visual Quiz - 3 Questions

Look at the execution_table, which handler runs when the left mouse button is clicked?

A onLeftClick

B onRightClick

C No handler

D onMiddleClick

💡 Hint

Check the 'Handler Called' column for Step 1 in execution_table.

At which step does the prevent default action happen?

A Step 1

B Step 3

C Step 2

D No step

💡 Hint

Look at the 'Prevent Default' column in execution_table.

If we add @click.middle="onMiddleClick", what changes in the execution_table?

A Step 1 handler changes to onMiddleClick

B Step 3 handler changes to onMiddleClick

C No change

D Step 2 handler changes to onMiddleClick

💡 Hint

Look at Step 3 where middle click currently has no handler.

Concept Snapshot

Vue mouse button modifiers let you run code for specific mouse buttons.
Use .left, .right, .middle after @click.
Example: @click.left triggers on left click only.
.prevent stops default browser actions like context menu.
No handler runs if no matching modifier is used.

Full Transcript

In Vue, mouse button modifiers let you run different code depending on which mouse button the user clicks. When a user clicks, Vue checks if the click event has a modifier like .left or .right. If it matches, Vue runs the handler for that button. For example, @click.left runs only on left clicks. The .prevent modifier stops the browser's default action, like the right-click menu. If no modifier matches, no handler runs. This helps create buttons that respond differently to left, right, or middle clicks.