Access click.prevent etc event modifiers

[Blue101black]

In a Vue component, how do you programmatically check if an event modifier has been used? I see it's possible for v-model but I cannot figure it out for things like a click event.

[harshagarwalnyu]

Hi there!

In Vue, you cannot programmatically check if an event modifier (like .prevent or .stop) was used from within the event handler or the component itself.

Why is this the case?

Event modifiers in Vue are compiler-level syntactic sugar. When you write @click.prevent="handler", the Vue compiler transforms this template into a wrapper function that automatically calls event.preventDefault() before executing your handler.

Because the modifier is applied by the parent component at compile time, the child component (or the handler function) receives the event after the wrapper has already processed it. There is no internal flag or metadata passed along with the event to indicate which modifiers were applied.

Workarounds

Depending on your use case, here are two ways to achieve the behavior you want:

1. Check the native Event object properties
If you want to know if .prevent or .stop was used, you can inspect the native DOM event object that is passed to your handler. The event object tracks whether its default behavior was prevented or its propagation stopped.

function handleClick(event) {
  // Checks if `@click.prevent` was used
  if (event.defaultPrevented) {
    console.log('The .prevent modifier was used!');
  }
  
  // Note: There is no direct property for .stop (stopPropagation),
  // but event.cancelBubble might be true in some browsers if propagation was stopped.
}

2. Pass a prop instead of relying on modifiers
If you are building a custom component and want to conditionally apply behavior based on whether the parent wants to prevent default actions, it is much more idiomatic to accept a boolean prop.

<!-- ChildComponent.vue -->
<script setup>
const props = defineProps({
  preventClick: Boolean
});

function onClick(event) {
  if (props.preventClick) {
    event.preventDefault();
  }
  // Continue with other logic...
}
</script>

<!-- ParentComponent.vue -->
<ChildComponent prevent-click @click="handler" />

(Note: As you mentioned, v-model is an exception because its modifiers are explicitly passed to the component as a modelModifiers prop by design, allowing the component to react to things like v-model.capitalize).

Hope this helps clarify how modifiers work under the hood!