Event Modifires in Vue

Event modifiers help keep your method logic clean by handling common DOM event tasks declaratively. Instead of calling event.preventDefault() or event.stopPropagation() inside your methods, you can attach modifiers directly to the v-on directive.

Vue provides several built-in event modifiers:

• .stop – prevent event propagation (bubbling)
• .prevent – prevent the default browser behavior
• .once – the event handler runs only once
• .enter – trigger only when the Enter key is pressed
• .capture – use event capturing mode (outer element handles before inner)

Preventing Default Behavior

A common scenario is clicking a link (<a>) and wanting to avoid navigation. Without a modifier you would call event.preventDefault() inside the handler.

Without modifier (manual handling):

<template>
  <a href="https://example.com" @click="handleClick">Visit Example</a>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      event.preventDefault();  // manual default prevention
      console.log('Link clicked, no navigation');
    }
  }
}
</script>

Using .prevent modfiier:

<template>
  <a href="https://example.com" @click.prevent="handleClick">Visit Example</a>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Link clicked, no navigation (via modifier)');
    }
  }
}
</script>

Stopping Event Propagation

When a child element's event bubbles up to its parent, both handlers fire. This is known as event bubbling.

Bubbling example (without stopping):

<template>
  <div @click="parentHandler" class="outer">
    <p @click="childHandler" class="inner">Click me</p>
  </div>
</template>

<script>
export default {
  methods: {
    parentHandler() {
      console.log('Parent DIV clicked');
    },
    childHandler() {
      console.log('Child P clicked');
    }
  }
}
</script>

Clicking the <p> logs both "Child P clicked" and "Parent DIV clicked" because the event bubbles.

Using .stop modifier to prevent bubbling:

<template>
  <div @click="parentHandler" class="outer">
    <p @click.stop="childHandler" class="inner">Click me (no bubble)</p>
  </div>
</template>

<script>
export default {
  methods: {
    parentHandler() {
      console.log('Parent DIV clicked');
    },
    childHandler() {
      console.log('Child P clicked – bubbling stopped');
    }
  }
}
</script>

Now only "Child P clicked – bubbling stopped" is logged; the parent handler does not fire.