VUE 3 dragenter and dragleave being mistakenly invoked on child elements

Question

I am implementing a behavior with dragenter and dragleave in VUE 3, although I am putting the event in the parent element it is being called when internally in all the child elements and I only need to call it in the parent.

This is an example of the error https://jsfiddle.net/merodriguez9112/gfcd48Lm/14/

Answer 1

You can use the .self event modifier if you want the event to not apply to child elements.

<div class="drop-zone" @dragenter.self="onDragEnter" @dragleave.self="onDragleave">

You can also potentially solve this with CSS using pointer-events (https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events)

.child1 {
  pointer-events: none;
  height: 50px;
  width: 100px;
  background-color: red;
}

.child2 {
  pointer-events: none;
  height: 50px;
  width: 100px;
  background-color: blue;
}