Firefox在拖动文本时触发dragleave

Question

我试图跟踪整个屏幕的dragenter/leave,这在Chrome/Safari中运行良好,由/sf/answers/721757081/提供的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仍然给我带来问题,这里有一个小提示来演示:http://jsfiddle.net/tusRy/6/

这是一个Firefox错误还是可以用JS来驯服？或者是否有更强大的方法来执行所有这些？

谢谢!

更新:更新了http://jsfiddle.net/tusRy/6/,以减少混乱.要解释小提琴的预期行为:

• 将文件拖到窗口中,p.target应为"ENTER"黄色.
• 将文件拖出窗口,p.target应为"LEAVE"红色.
• 在窗口中删除一个文件,p.target应该是"LEAVE"红色.

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

Answer 1

从版本22.0开始,Firefox仍在这样做.当您拖动文本节点时,它会触发两种dragenter和dragleave事件:一种是事件目标和relatedTarget是文本节点的父元素,另一种是目标是父元素,而相关目标是实际文本节点(甚至不是一个合适的DOM元素).

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

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

我使用try/catch块来检查nodeType,因为有时事件从文档外部(例如在其他iframe中)触发(莫名其妙)并尝试访问其nodeType会引发权限错误.

这是实现:http: //jsfiddle.net/9A7te/

Answer 2

我想出了一种解决方案，尚未在 Chrome 和 FF 之外的其他浏览器上进行测试，但到目前为止有效。现在的样子是这样的setTimeout：

setTimeout( function() {
    var isChild = false;

    // in order to get permission errors, use the try-catch
    // to check if the relatedTarget is a child of the body
    try {
        isChild = $('body').find(e.relatedTarget).length ? true : isChild;
    }
    catch(err){} // do nothing

    collection = collection.not(e.target);
    if (collection.size() === 0 && !isChild) {
        self.trigger('draghoverend');
    }
}, 1);

完整代码在这里 - http://jsfiddle.net/tusRy/13/。

这个想法是检查相关标签是否是正文的子级，在这种情况下我们仍在浏览器中并且draghoverend不应触发该事件。由于这在移出窗口时可能会引发错误，因此我使用了 try 方法来避免它。

好吧，也许具有更多 JS 技能的人可以改进这一点:)