jQuery ondrop事件与内联ondrop事件表现不一致问题排查

这是因为jQuery给原生DOM事件做了一层封装，你在事件回调里拿到的event是jQuery包装后的事件对象，而非原生的DragEvent——原生事件对象藏在event.originalEvent属性里，直接访问event.dataTransfer自然找不到对应数据。另外你还漏掉了原内联事件里dragenter时清空文本的逻辑，这也需要补上。

修正后的完整代码 #

JavaScript部分

$('.drag-and-drop').on('dragenter', function(event){
    // 补上原内联逻辑：清空区域文本
    $(this).text('');
    event.stopPropagation();
    event.preventDefault();
});

$('.drag-and-drop').on('dragover', function(event){
    event.stopPropagation();
    event.preventDefault();
});

$('.drag-and-drop').on('drop', function(event){
    event.stopPropagation();
    event.preventDefault();
    // 关键：获取jQuery封装后的原生事件对象
    const nativeDragEvent = event.originalEvent;
    dodrop(nativeDragEvent);
});

function dodrop(event) {
    var dt = event.dataTransfer;
    var files = dt.files;
    var count = files.length;
    output("File Count: " + count + "\n");
    for (var i = 0; i < files.length; i++) {
        output(" File " + i + ":\n(" + (typeof files[i]) + ") : <" + files[i] + " > " + files[i].name + " " + files[i].size + "\n");
    }
}

function output(text) {
    $('.drag-and-drop').text($('.drag-and-drop').text() + text);
}

HTML部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output" class="drag-and-drop" style="min-height: 200px; white-space: pre; border: 1px solid black;">
 DROP FILES HERE FROM FINDER OR EXPLORER
</div>

关键修改说明 #

1. 获取原生事件对象：在drop回调里通过event.originalEvent拿到真实的拖放事件，再传给dodrop函数，这样就能正常访问dataTransfer和其中的文件列表了。
2. 补全清空逻辑：在dragenter事件里添加文本清空操作，和原内联事件的行为保持一致。
3. 保留默认行为阻止：stopPropagation()和preventDefault()是拖放功能正常触发的必要条件——必须阻止浏览器默认的文件打开行为，才能让自定义逻辑生效。

内容的提问来源于stack exchange，提问作者Jake