Question

我正在玩完整形式的拖放（所以没有即时上传）。我虽然很小的部分会在用文件盘旋时强调某个字段集。输入dragover和dragenter个事件（以及dragleave等）。

原来这不是一个小部分。小提琴：http://jsfiddle.net/rudiedirkx/epp74/

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

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

要对拖动事件做同样的事情，我需要相同的fromElement和toElement。你可以在小提琴中看到，我试试，但我找不到它们。

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

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

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

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

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

Answer 1

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

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足以告诉你何时鼠标移入或完全一个特定的元素。

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

2 个答案: