vue.js - VUE 3 dragenter 和 dragleave 在子元素上被错误地调用

Question

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

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

Answer 1

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

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

您也可以使用指针事件（https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events）使用 CSS 解决这个问题

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

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