如何避免子div在react中调用父级的`onDragLeave`事件

Question

请参阅此codesandbox。

我有一个父 div 需要处理可拖动事件（例如将文件拖到其上时）。当onDragEnter调用时，我希望背景颜色改变。但是，我有一个子 div，当将其悬停在其上时，会调用父 div 的onDragLeave事件。我尝试使用此子 div 的 ref 来确定事件目标是否包含在子 div 中，但这似乎不起作用。如何避免 React 中的子 div 调用该onDragLeave事件？谢谢！

import React, { useState } from 'react';

const App = () => {
  const [dragOver, setDragOver] = useState(false);

  const preventDefaults = (event) => {
    event.preventDefault();
    event.stopPropagation();
  };

  const onDragEnter = (event) => {
    preventDefaults(event);
    console.log('ENTER');
    if (!dragOver) {
      setDragOver(true);
    }
  };

  const onDragLeave = (event) => {
    preventDefaults(event);
    console.log('LEAVE');
    setDragOver(false);
  };

  return (
    <div
      data-testid="document-upload"
      onDragEnter={onDragEnter}
      onDragLeave={onDragLeave}
      style={{ 
        background: dragOver ? 'green' : 'red',
        height: '20rem',
        width: '20rem',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <div
        style={{ border: '2px solid blue', height: '10rem', width: '10rem' }}
      />
    </div>
  );
};

export default App;

Answer 1

最简单的方法是在child 的 proppointerEvents: "none"中进行设置，以便忽略该 div 上所有与指针相关的事件。不过，这会带来一些限制 - 就像您无法将单击事件绑定到子 div 一样。style<div>

如果这不符合您的应用程序的限制，您可以修改您的onDragLeave处理程序以检查relatedTarget事件的（请参阅文档）。如果拖动离开父级<div>但进入父级的子级，则relatedTarget（即子级 div）将被（即父级）包含（参见文档）currentTarget<div>

这是应该可以工作的代码：

const onDragLeave = (event) => {
    preventDefaults(event);
    // This condition will be true when the drag leaves the parent for a child,
    // but false when the drag leaves the parent for somewhere else.
    if (event.currentTarget.contains(event.relatedTarget)) return;
    console.log("LEAVE");
    setDragOver(false);
  };

请参阅此代码和框。