dragenter/dragover 事件中没有 Event.fromElement 吗？

Question

我正在玩完整形式的拖放（所以没有即时上传）。我虽然用文件悬停在一小部分会突出显示某个字段集。输入dragover 和dragenter 事件（和dragleave 等）。

事实证明，这并不是一个很小的部分。小提琴：http://jsfiddle.net/rudiedirkx/epp74/

试试看：拖动一个字段集并移动一下。第一个over 触发字段集的dragenter 事件（字段集为黄色）。之后的移动（在同一个字段集中）会触发 dragenters 和 dragleaves（字段集不再是黄色），这很糟糕。

这就是为什么我想做很久以前 IE 为 mouseover 和 mouseout 制作的东西：mouseenter 和 mouseleave（它们只触发一次）。对于拖动事件，完全相同的事情适用：它们应该以完全相同的方式只触发一次。 JS 库通过使用 Event.fromElement 和 Event.toElement 来欺骗这些 IE 事件（并将它们与事件所有者元素进行比较）。 （详情请参阅jQuery 或Mootools 来源。）

为了使拖动事件相同，我需要相同的 fromElement 和 toElement。您可以在 Fiddle 中看到，我尝试了，但我找不到它们。

有人知道他们在哪里吗？为什么它们不可用？

我主要使用 Chrome，它在 dragenter 事件中没有 fromElement，但在 dragleave 事件中确实有 toElement。在 Firefox 中情况稍差（但更合乎逻辑）：两者都是空的。

非常欢迎任何和所有想法。

编辑
在a little more debugging 之后，我发现dragleave 中的Chrome 的toElement 并不总是正确的。它永远不会比this“更大”，但有时它应该是：当我将字段集 (this) 留给其父表单 (toElement) 时。当我这样做时，this 和 toElement 都是字段集（这是不正确的，对吧？）。

编辑解决方案：
我最终得到了这样的结果：http://jsfiddle.net/rudiedirkx/Lwd3md71/ 忽略事件中的元素，并使用事件坐标来查找鼠标下的元素。为了使它在每个动画帧中触发一次 max，它使用 requestAnimationframe，结果为 31-59 fps。

Answer 1

Firefox 提供relatedTarget 事件属性，但 Chrome 和 Safari 不提供。遗憾的是，这个问题已经公开了几年，因为这个Chrome bug 和这个Webkit bug。

编辑：该问题已在 Chrome 中修复。

Answer 2

有一种方法可以为“dragleave”事件伪造relatedTarget，即从伴随的“dragenter”事件中设置一个变量——因为dragleave总是在dragenter之前，所以在后者中设置的变量将可用对前者：

var relatedTarget = null;

document.addEventListener('dragenter', function(e)
{
    relatedTarget = e.target;

}, false);
document.addEventListener('dragleave', function(e)
{
    console.log('target = ' + e.target + ' relatedTarget = ' + relatedTarget);

}, false);

它不会反过来工作，但如果你以这种方式使用它，你真的不需要 dragenter 来做任何其他事情 - 即单独的 dragleave 足以告诉你鼠标何时移动或完全移动出，一个特定的元素。