Question

我遇到了传递给drop事件中的函数的事件对象的问题。在我的代码中，div#dropArea由firstDrop函数处理它的drop事件，它执行一些动画，然后调用处理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() { ... });里面，所以函数声明的顺序无关紧要，我想。

Answer 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));

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

1 个答案: