Mouse button modifiers in Vue - Performance & Optimization

Performance: Mouse button modifiers

MEDIUM IMPACT

This affects how efficiently mouse events are handled and filtered in the browser, impacting interaction responsiveness.

Handling click events only for the left mouse button

Vue

<template>
  <button @click.left="handleLeftClick">Click me</button>
</template>

<script setup>
function handleLeftClick() {
  console.log('Left click detected');
}
</script>

Vue's .left modifier filters events at the framework level, so the handler only runs for left clicks.

📈 Performance GainReduces event handler calls by filtering early, improving interaction responsiveness.

Handling click events only for the left mouse button

Vue

<template>
  <button @click="handleClick">Click me</button>
</template>

<script setup>
function handleClick(event) {
  if (event.button === 0) {
    console.log('Left click detected');
  }
}
</script>

The event handler runs on every mouse click regardless of button, causing unnecessary JavaScript execution.

📉 Performance CostTriggers event processing for all mouse buttons, increasing CPU usage and delaying response.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Handling all clicks and filtering in handler	1 event listener	0	0	[X] Bad
Using Vue .left mouse button modifier	1 event listener	0	0	[OK] Good

Rendering Pipeline

Mouse button modifiers filter events before the JavaScript handler runs, reducing unnecessary event processing and improving input responsiveness.

→Event Handling

→JavaScript Execution

⚠️ BottleneckJavaScript Execution due to unnecessary event handler calls

Core Web Vital Affected

INP

This affects how efficiently mouse events are handled and filtered in the browser, impacting interaction responsiveness.

Optimization Tips

1Use Vue mouse button modifiers (.left, .right, .middle) to filter events early.

2Avoid filtering mouse buttons inside event handlers to reduce unnecessary JavaScript work.

3Efficient event filtering improves input responsiveness and reduces CPU usage.

Performance Quiz - 3 Questions

What is the main performance benefit of using Vue's mouse button modifiers like .left?

A They reduce the number of DOM nodes created.

B They prevent unnecessary event handler execution for other mouse buttons.

C They improve CSS selector matching speed.

D They decrease image loading time.

DevTools: Performance

How to check: Record a performance profile while clicking the button multiple times. Look for event handler call counts and JavaScript execution time.

What to look for: Fewer event handler calls and lower scripting time indicate better performance with mouse button modifiers.