Sometimes, we want to prevent on click on parent when clicking button inside div with Vue.js.

In this article, we’ll look at how to prevent on click on parent when clicking button inside div with Vue.js.

How to prevent on click on parent when clicking button inside div with Vue.js?

To prevent on click on parent when clicking button inside div with Vue.js, we can add the stop modifier to stop event propagation.

For instance, we write

<template>
  <div>
    <p @click.stop="onClick">hello world</p>
  </div>
</template>

to add @click.stop and set it to onClick.

With the stop modifier, onClick only runs when the p element is clicked.

Conclusion

To prevent on click on parent when clicking button inside div with Vue.js, we can add the stop modifier to stop event propagation.