[Vuejs]-Stop event listener from listing to children elements in Vue

by

1👍

✅

I endorse kimy82‘s answer. Use click.self. Snippet updated.

new Vue({
  el: '#modal',
  data: {
    active: true,
  },
  methods: {
    closeModal(event) {
      this.active = false
    }
  }
})
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  justify-content: center;
  align-items: center;
  background-color: black;
}

.modal.active {
  display: flex;
 }

.modal-content {
  width: 200px;
  height: 200px;
  padding: 1rem;
  background-color: white;
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="modal" class="modal" :class="{active: active}" v-on:click.self="closeModal">
  <div class="modal-content">This child element shouldn't be able to close the modal on click.</div>
</div>
👤Roy J

2👍

You can try
v-on:click.self=…
Should only trigger if the target element is itself.
Hope that helps

👤kimy82

1👍

There are event modifiers for the click event handler
https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers

<!-- modifiers can be chained -->
<a v-on:click.stop.prevent="doThat"></a>
👤Reiner

Leave a comment