仅在父级而不是子级上触发Dragenter？

Question

我试图在我的UI中触发文件的拖放区，但仅当您将文件拖到窗口Google Images上时才会触发。但是，dragenter和dragleave似乎在所有子项上触发，而不仅仅是我添加了侦听器的项。我已经尝试过preventDefault和stopPropagation，但都没有帮助。

我试图避免在每个事件触发器上运行父检查，因为当您离开窗口时我也需要关闭它，并且我不确定它是否可以使用，因为从技术上讲，离开仍然有一个窗口内的父项？

我的简化代码如下：

const [dragging, setDragging] = useState(false);

const dragEnter = event => {
  event.preventDefault();
  event.stopPropagation();
  setDragging(true);
};

const dragLeave = event => {
  event.preventDefault();
  event.stopPropagation();
  setDragging(false);
};

useEffect(() => {
  window.addEventListener("dragenter", dragEnter, false);
  window.addEventListener("dragleave", dragLeave, false);
  return () => {
    window.removeEventListener("dragenter", dragEnter, false);
    window.removeEventListener("dragleave", dragLeave, false);
  };
}, []);

[这真的是simplified demo在“运作中”。我觉得这必须解决一个问题，但我没有很多运气来搜索它。

这些都将存在于React项目中，尽管我认为那不是让我在这里的原因。

Answer 1

使用event.currentTarget并检查它是否是父元素

Answer 2

啊，我忘记了拖放的痛苦。问题不在于冒泡，而在于疯狂地触发了新事件。但是幸运的是，有一种方法可以修复它event.currentTarget。您需要添加以下CSS：

credit here

这里是通过.App * {pointer-events: none;} 添加的fiddle CSS的修改