javascript - How to avoid a child div in react invoking a parent's `onDragLeave` event - Stack Overflow

admin管理员组

文章数量:1353151

Please see this codesandbox.

I have a parent div that needs to handle for draggable events (such as when a file is dragged over it). When onDragEnter is invoked, I want the background color to change. However, I have a child div, which, when hovering over it, invokes the parent div's onDragLeave event. I've tried using a ref with this child div to determine if the event target is contained in the child div but that doesn't seem to be working. How can I avoid a child div in React invoking the onDragLeave event? Thanks!

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;

Please see this codesandbox.

I have a parent div that needs to handle for draggable events (such as when a file is dragged over it). When onDragEnter is invoked, I want the background color to change. However, I have a child div, which, when hovering over it, invokes the parent div's onDragLeave event. I've tried using a ref with this child div to determine if the event target is contained in the child div but that doesn't seem to be working. How can I avoid a child div in React invoking the onDragLeave event? Thanks!

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;

• javascript
• html
• css
• reactjs

Share Improve this question Follow asked Oct 25, 2021 at 16:37 JimmyJimmy 3,8901616 gold badges5151 silver badges111111 bronze badges 1

• 1 This is quite a tricky business with HTML5 drag and drop - see this question and answers for reference stackoverflow./questions/7110353/… – Woody Commented Oct 26, 2021 at 15:37

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 14

The simplest way to do this would be to set pointerEvents: "none" in the style prop of the child <div>, so that all pointer-related events on this div are ignored. That would introduce some limitations, though - like you couldn't bind click events to the child div.

If this doesn't fit within the constraints of your application, you can modify your onDragLeave handler to inspect the relatedTarget of the event (see docs). If the drag is leaving the parent <div> but entering a child of the parent, then the relatedTarget (i.e. child div), will be contained (see docs) by the currentTarget (i.e. the parent <div>)

Here's the code that should work:

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);
  };

See this codesandbox.

本文标签： javascriptHow to avoid a child div in react invoking a parent39s onDragLeave eventStack Overflow