你只需要保留一个引用计数器，当你得到dragenter时增加它，当你得到dragleave时减少它。当计数器为0时-删除类。

var counter = 0;

$('#drop').bind({
    dragenter: function(ev) {
        ev.preventDefault(); // needed for IE
        counter++;
        $(this).addClass('red');
    },

    dragleave: function() {
        counter--;
        if (counter === 0) { 
            $(this).removeClass('red');
        }
    }
});

注意:在drop事件中，将计数器重置为零，并清除添加的类。

你可以在这里运行它

不确定这是否跨浏览器，但我在Chrome中测试，它解决了我的问题:

我想拖放一个文件在整个页面，但我的dragleave被解雇时，我拖过子元素。我的解决方法是查看鼠标的x和y:

我有一个div覆盖我的整个页面，当页面加载我隐藏它。

当你拖拽文件时，我显示它，当你拖拽到父文件时，它处理它，当你离开父文件时，我检查x和y。

$('#draganddrop-wrapper').hide();

$(document).bind('dragenter', function(event) {
    $('#draganddrop-wrapper').fadeIn(500);
    return false;
});

$("#draganddrop-wrapper").bind('dragover', function(event) {
    return false;
}).bind('dragleave', function(event) {
    if( window.event.pageX == 0 || window.event.pageY == 0 ) {
        $(this).fadeOut(500);
        return false;
    }
}).bind('drop', function(event) {
    handleDrop(event);

    $(this).fadeOut(500);
    return false;
});

我也遇到过同样的问题，下面是我的解决方案——我认为比上面的要简单得多。我不确定它是否跨浏览器(可能取决于冒泡顺序)

为了简单起见，我将使用jQuery，但解决方案应该是框架独立的。

事件以任意一种方式生成父节点，如下所示:

<div class="parent">Parent <span>Child</span></div>

我们附加事件

el = $('.parent')
setHover = function(){ el.addClass('hovered') }
onEnter  = function(){ setTimeout(setHover, 1) }
onLeave  = function(){ el.removeClass('hovered') } 
$('.parent').bind('dragenter', onEnter).bind('dragleave', onLeave)

差不多就是这样。:)它可以工作，因为即使onEnter在子上先于onLeave在父上触发，我们延迟它稍微颠倒顺序，所以类先被删除，然后在一毫秒后重新应用。

是否有可能阻止dragleave在拖动到子元素时发射?

Yes.

#drop * {pointer-events: none;}

CSS似乎足够Chrome。

当使用它与Firefox， #drop不应该有文本节点直接(否则有一个奇怪的问题，一个元素“离开它自己”)，所以我建议只留下一个元素(例如，使用一个div在#drop里面放所有的东西)

下面是一个jsfiddle解决原始问题(损坏的)示例。

我还从@Theodore Brown的例子中做了一个简化版本，但只基于这个CSS。

不过，并不是所有浏览器都实现了这种CSS: http://caniuse.com/pointer-events

看到Facebook的源代码，我可以找到这个指针事件:无;但是，它可能多次与优雅的降级回退一起使用。至少它是如此简单，解决了许多环境中的问题。

我能够做到这一点使用超时dragleave。与其他使用这种方法的答案不同，我认为在拖拽时重置这个超时以避免闪烁是至关重要的。

我写的只是你需要的函数，然后使用你选择的框架进行绑定

let dragoverTimeout;
const onDragOver = (e: Event) => {
  e.preventDefault();
  e.stopPropagation();

  if (dragoverTimeout) {
    window.clearTimeout(dragoverTimeout);
    dragoverTimeout = null;
  }
  // Add your class here
}

const onDragLeave = (e: Event) => {
  e.preventDefault();
  e.stopPropagation();

  if (!dragoverTimeout) {
    dragoverTimeout = window.setTimeout(() => {
      // Remove your class here
    }, 100);
  }
}

const onDrop = (e) => {
  e.preventDefault();
  e.stopPropagation();

  const files = e.dataTransfer.files;
  // Remove your class here

  if (files.length > 0) {
    this.uploadFile(files);
  }
}

下面是另一个使用document.elementFromPoint的解决方案:

 dragleave: function(event) {
   var event = event.originalEvent || event;
   var newElement = document.elementFromPoint(event.pageX, event.pageY);
   if (!this.contains(newElement)) {
     $(this).removeClass('red');
   }
}

希望这有用，这是小提琴。