仅在父母而不是孩子上触发draenter？答案

【问题标题】：Triggering dragenter only on parent and not on children?仅在父母而不是孩子上触发draenter？
【发布时间】：2020-06-05 17:33:25
【问题描述】：

我正在尝试在我的 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 项目中，尽管我不认为这就是让我来到这里的原因。

【问题讨论】：

查看addEventListener 中的 useCapture 选项。在捕获模式（首先发生）中，事件从 body 标记开始并一直向下到最低元素。一旦发生这种情况并到达元素，它将转身并冒泡回到 body 标签。您可以从捕获事件中stopPropagation，它会阻止它进一步发展。
我尝试将它从false 切换到true，但是当我将它拖到子元素上时它仍然设置和取消设置。

标签： javascript reactjs drag-and-drop mouseevent

【解决方案1】：

啊，我忘了拖放是多么痛苦。问题不是冒泡，而是新事件被疯狂地触发了。不过幸运的是，有一种方法可以修复它credit here。在您的情况下，您将添加以下 CSS：

.App * {pointer-events: none;}

这是通过style jsx 添加的fiddle CSS 的修改

【讨论】：

是的，我没有这样做，因为我认为它会禁用掉在目标上的能力。我猜不是这样？
如果您只想允许放置在特定子元素上，是的，您必须将该子元素更改为pointer-events: auto，然后您可能会在跨越该特定元素边界时收到事件。 AFAIK 没有办法解决这个问题。如果这成为一个问题，我建议在我上面提到的问题的下一个答案中使用“计数器”方法......那时它将是关于正确管理多个事件而不是阻止它们。

【解决方案2】：

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

【讨论】：

event.currentTarget 在这里似乎没有帮助。它总是作为最初被调用的元素返回，并且每个“离开”都是该元素的子元素。