html 5中event.originalEvent.dataTransfer.files和event.dataTransfer.files之间的区别

pey*_*our 11 jquery html5 drag-and-drop

有什么区别

event.originalEvent.dataTransfer.files
Run Code Online (Sandbox Code Playgroud)

event.dataTransfer.files
Run Code Online (Sandbox Code Playgroud)

???

因为在拖放,第二个代码不起作用,它是未定义的,我必须使用第一个代码,因为它的工作原理!

Esa*_*ija 35

jQuery不会将浏览器事件对象传递给您,它会传递jQuery事件对象.您可以通过.originalEventjQuery事件对象中的属性访问原始的未触摸事件对象.然后你可以照常进行.

所以在代码中:

jQuery事件模型:

$(document).on("drop dragend dragstart dragenter dragleave drag dragover", function(event) {
    event.preventDefault();
    if (event.type === "drop") {
        alert(event.originalEvent.dataTransfer.files);
    }
});
Run Code Online (Sandbox Code Playgroud)

W3C活动模型:

function preventDefault(event) {
    event.preventDefault();
}

function alertFiles(event) {
    alert(event.dataTransfer.files);
}
document.addEventListener("dragstart", preventDefault, false);
document.addEventListener("dragenter", preventDefault, false);
document.addEventListener("dragleave", preventDefault, false);
document.addEventListener("drag", preventDefault, false);
document.addEventListener("dragend", preventDefault, false);
document.addEventListener("dragover", preventDefault, false);
document.addEventListener("drop", preventDefault, false);
document.addEventListener("drop", alertFiles, false);
Run Code Online (Sandbox Code Playgroud)