jQuery 动画回调吃掉的事件对象答案

【问题标题】：Event object eaten by jQuery animation callbackjQuery 动画回调吃掉的事件对象
【发布时间】：2012-12-23 10:55:42
【问题描述】：

我在drop 事件中传递给函数的事件对象有问题。在我的代码中，div#dropArea 的 drop 事件由 firstDrop 函数处理，该函数执行一些动画，然后调用正确的函数 dropFromDesktop 来处理 e.dataTransfer.files 对象。我需要在两个单独的函数中使用这种方法，因为 HTML 文档中的其他一些 div 也进一步使用了后者（无需复制代码）。第一个仅使用一次，以隐藏一些“欢迎”文本。

一般来说，这种机制允许您从桌面拖动文件并将它们放到我网站上的某个区域中。

这是它的外观（在快捷方式中）：

function firstDrop(ev) {
    var $this = $(this);

    //when I call the function here, it passes the event with files inside it
    //dropFromDesktop.call($this, ev);

    $this.children('.welcomeText').animate({
        opacity: '0',
        height: '0'
    }, 700, function() {
        $('#raw .menu').first().slideDown('fast', function() {
            //when I call the function here, it passes the event, but 'files' object is empty
            dropFromDesktop.call($this, ev);
        });
    });
}

function dropFromDesktop(ev) {
    var files = ev.originalEvent.dataTransfer.files;
    (...) //handling the files
}

$('#dropArea').one('drop', firstDrop);
$('some_other_div').on('drop', dropFromDesktop);

问题出在jQuery.animation 的回调中——当我在其中调用我的函数时，事件对象被正确传递，但来自 dataTransfer 的文件对象为空！

整个脚本都放在$(document).ready(function() { ... }); 中，所以函数声明的顺序并不重要，我猜。

【问题讨论】：

制作显示问题的jsfiddle
你为什么不保留对Event.dataTransfer.files 的引用呢？这将解决您的问题
它会，但请注意dropFromDesktop 函数也被某个其他 div 的事件处理程序调用。在那里，整个event 对象被传递。
我怀疑该事件正在被修改。但是把console.log(ev)放在不同的地方，看看它是否真的在改变。
@matewka，我的意思是修改dropFromDesktop 以接收FileList 和some_other_div 的绑定。反正方法很多

标签： javascript jquery callback

【解决方案1】：

我怀疑您的问题与 Event 对象的生命周期有关。不幸的是，我不知道它的原因。但是，有一种我能想到的解决方法，它保留了对 Event.dataTransfer.files 的引用。

var handleFileList = function(fn) {
  return function(evt) {
    evt.preventDefault();
    return fn.call(this, evt.originalEvent.dataTransfer.files);
  };
};

var firstDrop = function(fileList) { ... }
var dropFromDesktop = function(fileList) { ... }

$('#dropArea').one('drop', handleFileList(firstDrop));
$('some_other_div').on('drop', handleFileList(dropFromDesktop));

【讨论】：

类似于我最近的方法，但更好更整洁。