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

【问题标题】：VUE 3 dragenter and dragleave being mistakenly invoked on child elementsVUE 3 dragenter 和 dragleave 在子元素上被错误调用
【发布时间】：2021-05-03 17:30:56
【问题描述】：

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

这是一个错误示例 https://jsfiddle.net/merodriguez9112/gfcd48Lm/14/

【问题讨论】：

标签： vue.js drag-and-drop vuejs3 dragenter

【解决方案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;
}

【讨论】：

如果它正在工作，但现在它忽略了内部元素，那么当你移动它们时，就好像你正在将元素移出该区域。看看这个我为父元素着色的例子。 jsfiddle.net/merodriguez9112/gfcd48Lm/27
我也尝试了pointer-events，但我没有得到任何不同的结果
感谢@RoboKozo 将两者结合得很好