我正在尝试跟踪整个屏幕的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仍然会给我带来问题,这里有一个小提示来演示：http://jsfiddle.net/tusRy/6/
这是一个Firefox错误还是可以用JS来驯服？或者是否有更强大的方法来执行所有这些？
谢谢！
更新：更新了http://jsfiddle.net/tusRy/6/以减少杂乱.要解释小提琴的预期行为：
>将文件拖到窗口中,p.target应为“ENTER”黄色.
>将文件拖出窗口,p.target应为“LEAVE”红色.
>在窗口中删除一个文件,p.target应为“LEAVE”红色.
在firefox中,当您将文件拖到文本上时会触发LEAVE事件.
解决方法
从版本22.0开始,Firefox仍在这样做.当你拖动一个文本节点时,它会触发两种dragenter和dragleave事件：一个是事件目标和relatedTarget是文本节点的父元素,另一个是目标是父元素,relatedTarget是实际文本节点(甚至不是一个合适的DOM元素).
解决方法只是检查dragenter和dragleave处理程序中的这两种事件并忽略它们：
try {
if(event.relatedTarget.nodeType == 3) return;
} catch(err) {}
if(event.target === event.relatedTarget) return;
我使用try / catch块来检查nodeType,因为有时事件从文档外部(例如在其他iframe中)触发(莫名其妙)并尝试访问其nodeType会引发权限错误.
