Sometimes, we want to fix click event target gives element or it’s child and not parent element with Vue.js.

In this article, we’ll look at how to fix click event target gives element or it’s child and not parent element with Vue.js.

How to fix click event target gives element or it’s child and not parent element with Vue.js?

To fix click event target gives element or it’s child and not parent element with Vue.js, we should use the event.currentTarget property.

For instance, we write

<template>
  <div>
    <a
      href="javascript:;"
      @click="showDetails(notification, $event)"
      v-for="notification in notifications"
      :key="notification.id"
    >
      <h4>title</h4>
      <p>test</p>
    </a>
  </div>
</template>

<script>
export default {
  //...
  methods: {
    showDetails(notification, event) {
      //...
      console.dir(event.currentTarget);
    },
  },
};
</script>

to log event.currentTarget when the showDetails method runs.

It runs when we click on an anchor element.

event.currentTarget always has the element that we clicked on.

Conclusion

To fix click event target gives element or it’s child and not parent element with Vue.js, we should use the event.currentTarget property.