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">

您也可以使用指針事件（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;
}