jquery - 拖动子元素时触发父元素的“dragleave”

Question

概述

我有以下 HTML 结构，并附上了 dragenter和 dragleave <div id="dropzone"> 的事件元素。

<div id="dropzone">
    <div id="dropzone-content">
        <div id="drag-n-drop">
            <div class="text">this is some text</div>
            <div class="text">this is a container with text and images</div>
        </div>
    </div>
</div>

问题

当我将文件拖到 <div id="dropzone"> 上时, dragenter事件按预期触发。但是，当我将鼠标移到子元素上时，例如 <div id="drag-n-drop"> , dragenter为 <div id="drag-n-drop"> 触发事件元素，然后是 dragleave为 <div id="dropzone"> 触发事件元素。

如果我将鼠标悬停在 <div id="dropzone">再次元素，dragenter事件再次被触发，这很酷，但是之后 dragleave为刚刚离开的子元素触发事件，因此 removeClass指令被执行，不爽。

这种行为存在问题的原因有两个:

1. 我只是附上dragenter & dragleave到<div id="dropzone">所以我不明白为什么子元素也附加了这些事件。

2. 我还在拖<div id="dropzone">元素悬停在其子元素上，所以我不想要 dragleave开火!

jsFiddle

这里有一个 jsFiddle 可以修改:http://jsfiddle.net/yYF3S/2/

问题

那么...当我将文件拖到 <div id="dropzone"> 上时，我怎样才能做到这一点？元素，dragleave即使我拖过任何子元素也不会触发...它只会在我离开 <div id="dropzone"> 时触发元素...在元素边界内的任何地方悬停/拖动不应触发dragleave事件。

我需要它是跨浏览器兼容的，至少在支持 HTML5 拖放的浏览器中，所以 this answer还不够。

Google 和 Dropbox 似乎已经解决了这个问题，但是他们的源代码被缩小/复杂，所以我无法从他们的实现中解决这个问题。

Answer 1

如果您不需要将事件绑定(bind)到子元素，您可以随时使用 pointer-events 属性。

.child-elements {
  pointer-events: none;
}