javascript - Firefox 在文本上拖动时触发 dragleave

Question

我正在尝试跟踪整个屏幕的 dragenter/leave，到目前为止，这在 Chrome/Safari 中运行良好，由来自 https://stackoverflow.com/a/10310815/698289 的 draghover 插件提供如:

$.fn.draghover = function(options) {
    return this.each(function() {

        var collection = $(),
            self = $(this);

        self.on('dragenter', function(e) {
            if (collection.size() === 0) {
                self.trigger('draghoverstart');
            }
            collection = collection.add(e.target);
        });

        self.on('dragleave drop', function(e) {
            // timeout is needed because Firefox 3.6 fires the dragleave event on
            // the previous element before firing dragenter on the next one
            setTimeout( function() {
                collection = collection.not(e.target);
                if (collection.size() === 0) {
                    self.trigger('draghoverend');
                }
            }, 1);
        });
    });
};

function setText(text) {
    $('p.target').text(text);
}

$(document).ready(function() {
    $(window).draghover().on({
        'draghoverstart': function() {
            setText('enter');
        },
        'draghoverend': function() {
            setText('leave');
        }
    });
});

然而，当我拖过文本项时，Firefox 仍然给我带来问题，这里有一个 fiddle 来演示:http://jsfiddle.net/tusRy/6/

这是 Firefox 的错误还是可以用 JS 解决？或者是否有更强大的方法来执行所有这些操作？

谢谢!

更新:将 fiddle 更新为 http://jsfiddle.net/tusRy/6/减少一点困惑。解释 fiddle 的预期行为:

• 将文件拖到窗口中，p.target 应该是黄色的“ENTER”。
• 将文件拖出窗口，p.target 应该是“LEAVE”红色。
• 在窗口中拖放一个文件，p.target 应该是“LEAVE”红色。

在 firefox 中，当您将文件拖到文本上时会触发 LEAVE 事件。

Answer 1

从 22.0 版开始，Firefox 仍在这样做。当您拖动文本节点时，它会触发两种 dragenter 和 dragleave 事件:一种是事件目标和 relatedTarget 都是文本节点的父元素，另一种是其中 target 是父元素，relatedTarget 是实际的文本节点(甚至不是正确的 DOM 元素)。

解决方法是在您的 dragenter 和 dragleave 处理程序中检查这两种事件并忽略它们:

try {
    if(event.relatedTarget.nodeType == 3) return;
} catch(err) {}
if(event.target === event.relatedTarget) return;

我使用 try/catch block 来检查 nodeType，因为事件偶尔会(莫名其妙地)从文档外部(例如在其他 iframe 中)触发，并且尝试访问它们的 nodeType 会引发权限错误。

实现如下: http://jsfiddle.net/9A7te/