5

我在事件中传递给函数的事件对象有问题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() { ... });，所以函数声明的顺序并不重要，我猜。

4

1 回答 1

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));​
于 2012-12-23T12:13:21.813 回答