如何接受 div 的 D&D，但传播点击？

Question

我有一个全尺寸的 Windows div 容器，它对传入的文件拖放事件作出反应。

<div id="drag-overlay">
  <div id="drag-overlay-text">This is shown while drag is active...</div>
</div>

不幸的是，容器不再将点击传播到按钮等底层对象。是否有一个简单的 CSS 修复，或者我需要在 div 容器上注册一个点击处理程序并手动传播点击/拖动？后者真的不是一个好的解决方案

#drag-overlay {
  position: absolute;
  top: 0;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
}

拖放处理程序的注册：

var holder = document.getElementById('drag-overlay');
holder.ondragover = () => { ...
holder.ondragleave = () => { ...
holder.ondragend = () => { ...
holder.ondrop = (e: DragEvent) => { ...
...

Answer 1

我猜问题是按钮在技术上“在”drag-overlay 的“下方”，因为它是绝对定位的，所以对它们的任何操作都不能是 seen。

由于您没有发布很多代码，我将这个工作示例放在一起，显示将按钮放在#drag-overlay 之外，并且绝对将其定位为比#drag-overlay 更高的 z-index。

var btn = document.querySelector("button");

btn.addEventListener("click", function(e) {
  e.preventDefault();
  console.log("click");
});

#drag-overlay {
  position: absolute;
  top: 0;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
}

button {
  position: absolute;
  top: 0;
  z-index: 2;
  left: 0;
  right: 0;
}

<button>TEST</button>
<div id="drag-overlay">
  <div id="drag-overlay-text">This is shown while drag is active...</div>
</div>