如何避免子 div 响应调用父母的`onDragLeave`事件

Posted 2023-05-08

【中文标题】如何避免子 div 响应调用父母的`onDragLeave`事件

【英文标题】：How to avoid a child div in react invoking a parent's `onDragLeave` event

【发布时间】：2021-12-11 03:47:05

【问题描述】：

请参阅this 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;

【问题讨论】：

这是一个非常棘手的 html5 拖放业务 - 请参阅此问题和答案以供参考 ***.com/questions/7110353/…

【参考方案1】：

最简单的方法是在子<div> 的style 属性中设置pointerEvents: "none"，以便忽略此div 上所有与指针相关的事件。但是，这会引入一些限制 - 就像您无法将点击事件绑定到子 div。

如果这不符合您的应用程序的约束，您可以修改您的onDragLeave 处理程序以检查事件的relatedTarget（请参阅docs）。如果拖动离开父级<div>，但进入父级的子级，则relatedTarget（即子级div）将被包含（参见@987654322 @) 由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);
  ;

见this codesandbox。