Mouse button modifiers in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to listen for a right-click event on the button.

Vue

<template>
  <button @click.[1]="handleClick">Right Click Me</button>
</template>

<script setup>
function handleClick() {
  alert('Right click detected!')
}
</script>

Drag options to blanks, or click blank then click option'

Adouble

Bmiddle

Cleft

Dright

Attempts:

3 left

💡 Hint

Common Mistakes

Using .left instead of .right

Using .middle which listens for middle mouse button

Not using any modifier and only listening for left clicks

The .right modifier listens for right mouse button clicks.

2fill in blank

medium

Complete the code to listen for a middle mouse button click on the div.

Vue

<template>
  <div @click.[1]="handleMiddleClick">Click me with middle button</div>
</template>

<script setup>
function handleMiddleClick() {
  console.log('Middle button clicked')
}
</script>

Drag options to blanks, or click blank then click option'

Adbl

Bmiddle

Cleft

Dright

Attempts:

3 left

💡 Hint

Common Mistakes

Using .right instead of .middle

Using .dbl which is for double clicks

Not using any modifier and only listening for left clicks

The .middle modifier listens for middle mouse button clicks.

3fill in blank

hard

Fix the error in the code to listen for a left mouse button click on the span.

Vue

<template>
  <span @click.[1]="handleLeftClick">Click me</span>
</template>

<script setup>
function handleLeftClick() {
  alert('Left click detected')
}
</script>

Drag options to blanks, or click blank then click option'

Aright

Bmiddle

Cleft

Ddbl

Attempts:

3 left

💡 Hint

Common Mistakes

Using .right or .middle which listen for other buttons

Using .dbl which listens for double clicks

The .left modifier listens for left mouse button clicks explicitly.

4fill in blank

hard

Fill both blanks to listen for right and middle mouse button clicks on the div.

Vue

<template>
  <div @click.[1]="handleRight" @click.[2]="handleMiddle">Click me</div>
</template>

<script setup>
function handleRight() {
  console.log('Right click')
}
function handleMiddle() {
  console.log('Middle click')
}
</script>

Drag options to blanks, or click blank then click option'

Aright

Bmiddle

Cleft

Ddbl

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up .right and .middle

Using .left or .dbl instead

Use .right for right clicks and .middle for middle clicks.

5fill in blank

hard

Fill all three blanks to create a Vue component that listens for left, right, and middle mouse clicks on a button.

Vue

<template>
  <button @click.[1]="onLeft" @click.[2]="onRight" @click.[3]="onMiddle">Click me</button>
</template>

<script setup>
function onLeft() {
  console.log('Left click')
}
function onRight() {
  console.log('Right click')
}
function onMiddle() {
  console.log('Middle click')
}
</script>

Drag options to blanks, or click blank then click option'

Aleft

Bright

Cmiddle

Ddbl

Attempts:

3 left

💡 Hint

Common Mistakes

Using .dbl which listens for double clicks

Mixing up the order of modifiers

Use .left, .right, and .middle modifiers to listen for respective mouse buttons.