javascript从桌面拖动文件:dragenter/dragleave无法正确触发

javascript从桌面拖动文件:dragenter/dragleave无法正确触发,javascript,html,events,drag-and-drop,Javascript,Html,Events,Drag And Drop,为这个做了一把小提琴: 我的问题是,当您将文件从桌面拖到框中并覆盖框内的文本时,dragleave会触发。(将文件拖动到框中会使边框变为实心->将文件拖动到框内的文本上,边框将变为虚线:->这不是我想要的) 这是一个浏览器错误吗?(火狐9@win). 我还放了一个鼠标向上/向下的盒子,它可以很好地工作,这样你就可以比较两者了 如何实现正确的dragenter/dragleave行为? 另外,我绑定到body是因为我需要在我的真实应用程序中进行事件委托。这是规范中一个有充分证明的短命令。 这样的

为这个做了一把小提琴:

我的问题是,当您将文件从桌面拖到框中并覆盖框内的文本时,dragleave会触发。(将文件拖动到框中会使边框变为实心->将文件拖动到框内的文本上,边框将变为虚线:->这不是我想要的)

这是一个浏览器错误吗?(火狐9@win).

我还放了一个鼠标向上/向下的盒子,它可以很好地工作,这样你就可以比较两者了

如何实现正确的dragenter/dragleave行为?


另外,我绑定到body是因为我需要在我的真实应用程序中进行事件委托。

这是规范中一个有充分证明的短命令。

这样的函数可以帮助您确定目标元素是否是要将文件放置到的目标区域的子元素

function isChildElement(parent, child) {
    var childParent = child;
    while (childParent) {
        if (childParent == parent) {
           return true;
        }
        childParent = childParent.parentNode;
    }
    return false;
},

这个问题相对来说是众所周知的,但解决方案都相当“黑客”。我遇到了一个解决方法,在我的案例中解决了这个问题,并且应该能够适应大多数情况

我在可能的dropzones的容器(一个盒子)上侦听dragenter事件。每当拖动从一个元素移动到另一个元素并冒泡到容器时,就会触发事件。当目标是我的一个放置区域(或者可能是放置区域内的一个孩子,但在我的情况下,这是不必要的,因为如果不先输入周围的框,就无法到达孩子),然后我设置了可放置的高亮显示,与正常情况一样

dragenter
事件在容器本身上触发时,我会从上一个元素中删除高亮显示,因为我必须离开它。对于
dragenter
事件,突出显示的元素是
relatedTarget
,因此很容易找到,并且不需要
dragleave
事件侦听器


请注意,根据具体的拖放逻辑,您可能需要在拖放后明确删除突出显示。

我编写了一个名为“帮助我解决此问题”的小库,它可以在除IE之外的任何地方工作(在IE中它什么也不做)。

我遇到了同样的问题,最终找到了一个稳定的解决方案。这是一个名为draghover的插件,它可以跨浏览器工作。在这里查看:

没问题。我有一个小jquery小部件,如果你感兴趣的话,它可以让你轻松处理拖放文件操作?@SamGreenhalgh。。。你说的这个jQuery小部件在哪里?@Hristo对不起,我上个月搬到了中国,我还没有恢复回购协议,所以我无法拿到脚本。我会告诉你的。