我在这个问题上挣扎了很多，即使在读完所有这些答案之后，我想我可以和你分享我的解决方案，因为我认为这可能是一种更简单的方法，尽管有点不同。我的想法是简单地完全省略dragleave事件监听器，并在每个新的dragenter事件触发时编码dragleave行为，同时确保dragenter事件不会被不必要地触发。

在下面的例子中，我有一个表，我希望能够通过拖放API相互交换表行内容。在dragenter上，一个CSS类将被添加到当前拖动元素的row元素中，以突出显示它，而在dragleave上，这个类将被删除。

例子:

非常基本的HTML表格:

<table>
  <tr>
    <td draggable="true" class="table-cell">Hello</td>
  </tr>
  <tr>
    <td draggable="true" clas="table-cell">There</td>
  </tr>
</table>

还有dragenter事件处理函数，添加到每个表格单元格中(除了dragstart, dragover, drop和dragend处理程序，它们不是针对这个问题的，所以这里不复制):

/*##############################################################################
##                              Dragenter Handler                             ##
##############################################################################*/

// When dragging over the text node of a table cell (the text in a table cell),
// while previously being over the table cell element, the dragleave event gets
// fired, which stops the highlighting of the currently dragged cell. To avoid
// this problem and any coding around to fight it, everything has been
// programmed with the dragenter event handler only; no more dragleave needed

// For the dragenter event, e.target corresponds to the element into which the
// drag enters. This fact has been used to program the code as follows:

var previousRow = null;

function handleDragEnter(e) {
  // Assure that dragenter code is only executed when entering an element (and
  // for example not when entering a text node)
  if (e.target.nodeType === 1) {
    // Get the currently entered row
    let currentRow = this.closest('tr');
    // Check if the currently entered row is different from the row entered via
    // the last drag
    if (previousRow !== null) {
      if (currentRow !== previousRow) {
        // If so, remove the class responsible for highlighting it via CSS from
        // it
        previousRow.className = "";
      }
    }
    // Each time an HTML element is entered, add the class responsible for
    // highlighting it via CSS onto its containing row (or onto itself, if row)
    currentRow.className = "ready-for-drop";
    // To know which row has been the last one entered when this function will
    // be called again, assign the previousRow variable of the global scope onto
    // the currentRow from this function run
    previousRow = currentRow;
  }
}

在代码中留下非常基本的注释，因此这段代码也适合初学者。希望这对你有所帮助!请注意，您当然需要将我上面提到的所有事件侦听器添加到每个表单元格中，这样才能工作。

接受的答案在某些情况下可能有效，但如果您有多个重叠的子元素，它将很快崩溃。

根据您的用例，本文的顶部答案可能更简单、更清晰

当拖动子元素时，父元素的'dragleave'会触发

在这个问题被提出之后已经有一段时间了，并且提供了很多解决方案(包括丑陋的黑客)。

我设法解决了我最近遇到的同样的问题，感谢这个答案中的答案，并认为它可能对来到这个页面的人有帮助。 整个思想就是存储事件。每当对任何父元素或子元素调用时，ondrageenter中的目标。然后在ondragleave检查当前目标(event.target)是否等于你在ondragenter中存储的对象。

这两者匹配的唯一情况是当您的拖动离开浏览器窗口时。

这样工作正常的原因是当鼠标离开一个元素(例如el1)并进入另一个元素(例如el2)时，首先是el2。调用Ondragenter，然后调用el1.ondragleave。仅当拖动离开/进入浏览器窗口时，事件。目标将是“在两个el2。Ondragenter和el1.ondragleave。

这是我的工作样本。我已经在IE9+、Chrome、Firefox和Safari上进行了测试。

(function() {
    var bodyEl = document.body;
    var flupDiv = document.getElementById('file-drop-area');

    flupDiv.onclick = function(event){
        console.log('HEy! some one clicked me!');
    };

    var enterTarget = null;

    document.ondragenter = function(event) {
        console.log('on drag enter: ' + event.target.id);
        enterTarget = event.target;
        event.stopPropagation();
        event.preventDefault();
        flupDiv.className = 'flup-drag-on-top';
        return false;
    };

    document.ondragleave = function(event) {
        console.log('on drag leave: currentTarget: ' + event.target.id + ', old target: ' + enterTarget.id);
        //Only if the two target are equal it means the drag has left the window
        if (enterTarget == event.target){
            event.stopPropagation();
            event.preventDefault();
            flupDiv.className = 'flup-no-drag';         
        }
    };
    document.ondrop = function(event) {
        console.log('on drop: ' + event.target.id);
        event.stopPropagation();
        event.preventDefault();
        flupDiv.className = 'flup-no-drag';
        return false;
    };
})();

这是一个简单的html页面:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multiple File Uploader</title>
<link rel="stylesheet" href="my.css" />
</head>
<body id="bodyDiv">
    <div id="cntnr" class="flup-container">
        <div id="file-drop-area" class="flup-no-drag">blah blah</div>
    </div>
    <script src="my.js"></script>
</body>
</html>

使用适当的样式，我所做的是使内部div (#file-drop area)在文件被拖到屏幕时变得更大，以便用户可以轻松地将文件放到适当的位置。

只要检查拖过的元素是否是子元素，如果是，那么不要删除'拖过'样式的类。非常简单，对我来说很有用:

 $yourElement.on('dragleave dragend drop', function(e) {
      if(!$yourElement.has(e.target).length){
           $yourElement.removeClass('is-dragover');
      }
  })

我找到了一个简单的解决方法，所以分享吧。这对我来说很有效。

试试吧。

你实际上可以通过dragenter事件来实现这一点，你甚至不需要注册一个dragleave。你所需要的就是在你的掉落区周围有一个不掉落的区域，就是这样。

你也可以有嵌套的dropzone，这是完美的。检查这个以及嵌套dropzones。

$('.dropzone').on("dragenter", function(e) {
  e.preventDefault();
  e.stopPropagation();
  $(this).addClass("over");
  $(".over").not(this).removeClass("over"); // in case of multiple dropzones
});

$('.dropzone-leave').on("dragenter", function(e) {
  e.preventDefault();
  e.stopPropagation();
  $(".over").removeClass("over");
});

// UPDATE
// As mar10 pointed out, the "Esc" key needs to be managed,
// the easiest approach is to detect the key and clean things up.

$(document).on('keyup', function(e){
  if (e.key === "Escape") {
    $(".over").removeClass("over");
  }
});

解决. . !

为ex声明任意数组:

targetCollection : any[] 

dragenter: function(e) {
    this.targetCollection.push(e.target); // For each dragEnter we are adding the target to targetCollection 
    $(this).addClass('red');
},

dragleave: function() {
    this.targetCollection.pop(); // For every dragLeave we will pop the previous target from targetCollection
    if(this.targetCollection.length == 0) // When the collection will get empty we will remove class red
    $(this).removeClass('red');
}

不需要担心子元素。