VUE 3 dragenter 和 dragleave 在子元素上被错误调用

Question

我在 VUE 3 中使用 dragenter 和 dragleave 实现了一个行为，虽然我将事件放在父元素中，但在所有子元素内部时它被调用，我只需要在父级中调用它。

这是错误的例子 https://jsfiddle.net/merodriguez9112/gfcd48Lm/14/

Answer 1

如果您不希望事件应用于子元素，您可以使用 .self 事件修饰符。

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

您也可以通过 CSS 使用指针事件 (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;
}