問題描述

我正在嘗試跟蹤整個屏幕的 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');
        }
    });
});

但是，當我拖動文本項時，F(xiàn)irefox 仍然給我?guī)韱栴}，這里有一個小提琴來演示: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 來馴服?還是有更穩(wěn)健的方法來執(zhí)行所有這些操作?

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 中，當您將文件拖到文本上時會觸發(fā) LEAVE 事件.

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

推薦答案

截至 22.0 版，F(xiàn)irefox 仍在這樣做.當您在文本節(jié)點上拖動時，它會觸發(fā)兩種 dragenter 和 dragleave 事件:一種是事件目標和relatedTarget 都是文本節(jié)點的父元素，另一種是其中 target 是父元素，relatedTarget 是實際的文本節(jié)點(甚至不是正確的 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 中)觸發(fā)事件(莫名其妙地)，并且嘗試訪問它們的 nodeType 會引發(fā)權限錯誤.

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.

以下是實現(xiàn):http://jsfiddle.net/9A7te/

這篇關于Firefox 在文本上拖動時觸發(fā) dragleave的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！