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

Question

我找到了一个处理 HTML5 File Reader 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" );