当鼠标指针离开目标容器的拖动区域时触发"dragleave"事件。

这很有道理，因为在许多情况下，只有父母可以放弃，而不是后代。 我认为event. stoppropagation()应该处理这种情况，但似乎它没有做到这一点。

上面提到的一些解决方案似乎在大多数情况下都有效，但在那些不支持dragenter / dragleave事件的情况下失败了，比如iframe。

解决方法之一是检查事件。并验证它是否驻留在容器中，然后忽略dragleave事件，就像我在这里所做的那样:

function isAncestor(node, target) {
    if (node === target) return false;
    while(node.parentNode) {
        if (node.parentNode === target)
            return true;
        node=node.parentNode;
    }
    return false;
}

var container = document.getElementById("dropbox");
container.addEventListener("dragenter", function() {
    container.classList.add("dragging");
});

container.addEventListener("dragleave", function(e) {
    if (!isAncestor(e.relatedTarget, container))
        container.classList.remove("dragging");
});

你可以在这里找到一把能用的小提琴!

这里是最简单的跨浏览器解决方案(认真地说):

Jsfiddle <——尝试将一些文件拖到框中

你可以这样做:

var dropZone= document.getElementById('box');
var dropMask = document.getElementById('drop-mask');

dropZone.addEventListener('dragover', drag_over, false);
dropMask.addEventListener('dragleave', drag_leave, false);
dropMask.addEventListener('drop', drag_drop, false);

简单地说，你在拖拽区域内创建了一个“蒙版”，宽度和高度是继承的，位置是绝对的，这将显示拖拽开始的时间。 因此，在显示该蒙版之后，您可以通过附加其他拖放事件来实现这一技巧。

离开或掉落后，你只需将面具再次隐藏起来。 简单，无并发症。

(奥林匹克广播服务公司。: Greg Pettit的建议——你必须确保蒙版悬浮在整个盒子上，包括边框)

当鼠标指针离开目标容器的拖动区域时触发"dragleave"事件。

这很有道理，因为在许多情况下，只有父母可以放弃，而不是后代。 我认为event. stoppropagation()应该处理这种情况，但似乎它没有做到这一点。

上面提到的一些解决方案似乎在大多数情况下都有效，但在那些不支持dragenter / dragleave事件的情况下失败了，比如iframe。

解决方法之一是检查事件。并验证它是否驻留在容器中，然后忽略dragleave事件，就像我在这里所做的那样:

function isAncestor(node, target) {
    if (node === target) return false;
    while(node.parentNode) {
        if (node.parentNode === target)
            return true;
        node=node.parentNode;
    }
    return false;
}

var container = document.getElementById("dropbox");
container.addEventListener("dragenter", function() {
    container.classList.add("dragging");
});

container.addEventListener("dragleave", function(e) {
    if (!isAncestor(e.relatedTarget, container))
        container.classList.remove("dragging");
});

你可以在这里找到一把能用的小提琴!

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

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

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

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

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

下面是Chrome的解决方案:

.bind('dragleave', function(event) {
                    var rect = this.getBoundingClientRect();
                    var getXY = function getCursorPosition(event) {
                        var x, y;

                        if (typeof event.clientX === 'undefined') {
                            // try touch screen
                            x = event.pageX + document.documentElement.scrollLeft;
                            y = event.pageY + document.documentElement.scrollTop;
                        } else {
                            x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
                            y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
                        }

                        return { x: x, y : y };
                    };

                    var e = getXY(event.originalEvent);

                    // Check the mouseEvent coordinates are outside of the rectangle
                    if (e.x > rect.left + rect.width - 1 || e.x < rect.left || e.y > rect.top + rect.height - 1 || e.y < rect.top) {
                        console.log('Drag is really out of area!');
                    }
                })