Firefox 在文本上拖动时触发 dragleave

问题描述

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

I'm attempting to track a dragenter/leave for the entire screen, which is so far working fine in Chrome/Safari, courtesy of the draghover plugin from https://stackoverflow.com/a/10310815/698289 as in:

$.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/

However Firefox is still giving me problems when I drag over text items, here's a fiddle to demonstrate: http://jsfiddle.net/tusRy/6/

这是 Firefox 的错误还是可以用 JS 来驯服?还是有更稳健的方法来执行所有这些操作?

Is this a Firefox bug or can this be tamed with JS? Or is there a more robust method for performing all of this?

谢谢！

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

UPDATE: Updated fiddle to http://jsfiddle.net/tusRy/6/ to reduce clutter a bit. To explain the expected behavior of the fiddle:

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

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

In firefox, the LEAVE event is triggered when you drag the file over text.

推荐答案

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

As of version 22.0 Firefox is still doing this. When you drag over a text node it fires two kinds of dragenter and dragleave events: one where the event target and relatedTarget are BOTH the parent element of the text node, and another where the target is the parent element and the relatedTarget is the actual text node (not even a proper DOM element).

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

The workaround is just to check for those two kinds of events in your dragenter and dragleave handlers and ignore them:

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

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

I use a try/catch block to check the nodeType because occasionally events fire (inexplicably) from outside the document (eg. in other iframes) and trying to access their nodeType throws a permissions error.

以下是实现:http://jsfiddle.net/9A7te/

这篇关于Firefox 在文本上拖动时触发 dragleave的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！