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/

score 3 · Accepted Answer · answered May 03 '21 at 17:46

3

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;
}

answered May 03 '21 at 17:46

RoboKozo

4,981
5
51
79

this somehow if it is working but now it omits the internal elements, then when you move over them it is as if you are taking the element out of the area. Look at this example where I color the parent element. https://jsfiddle.net/merodriguez9112/gfcd48Lm/27/ – Manuel E García Rodríguez May 03 '21 at 18:09
I also tried with the `pointer-events` but with these I did not achieve any different result – Manuel E García Rodríguez May 03 '21 at 18:11
1

Thanks @RoboKozo combining the two works well – Manuel E García Rodríguez May 03 '21 at 18:56
I noticed the pointer-events silenced the child dragenter dragleave events - it didnt require the self flag. – David Zwart Mar 22 '23 at 09:57

VUE 3 dragenter and dragleave being mistakenly invoked on child elements

1 Answers1