为什么这个普通的JavaScript可以工作，而它等效的jQuery失败了？

Question

我发现了一个处理HTML5文件阅读器API的javascript。它是用纯javascript编写的，我正在将其转换为jQuery脚本。但是我在这一点上卡住了。

如此:

document.getElementById('drop-area').addEventListener('drop', function(e) {
    e.preventDefault();
    e.stopPropagation();
    console.log(e.dataTransfer.files); // outputs the right stuff
}, false);

这失败:

$('#drop-area').on('drop', function(e) {
    e.preventDefault();
    e.stopPropagation();
    console.log(e.dataTransfer.files); // ERROR: e.dataTransfer is undefined 
}); 

这个问题的解决方案是什么?

Answer 1

jQuery不规范dataTransfer事件属性，要访问它，你必须通过原始事件。

console.log(e.originalEvent.dataTransfer.files);

您也可以设置它，以便dataTransfer被添加到jQuery事件对象，通过以下操作。

jQuery.event.props.push( "dataTransfer" );