Firefox在拖动文字时触发拖曳功能 [英] Firefox firing dragleave when dragging over text

问题描述

我正在尝试跟踪整个屏幕的拖放/离开，这在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仍然会提供问题，以下是一个小提示： a href =http://jsfiddle.net/tusRy/6/ =nofollow noreferrer> 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，黄色为黄色。 / li>
  
• 将文件从窗口中拖出，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 事件：其中事件目标和相关目标是文本节点的父元素，另一个是目标是父元素，相关的目标是实际的文本节点（甚至不是适当的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 处理程序中的两种事件，并忽略它们： / p>

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在拖动文字时触发拖曳功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！