在()上使用jQuery时无法附加文件'drop'事件

Question

我正在尝试使用jQuery on()方法drop在执行文件拖放时将事件附加到浏览器窗口...

$(window).on('drop', function(event) {

    var dt = event.dataTransfer;
    var fileList = dt.files;

    // do stuff with the file list...
});

......但是我得到了TypeError:

每当我尝试将这个正在发生的事情drop到window或document或document.body.但是,如果我drop使用自定义JavaScript函数附加事件,则没有问题...

function attachEvent(element, event, fn) {
    if (element.addEventListener) {
        element.addEventListener(event, fn, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + event, fn);
    }
};

attachEvent(window, 'drop', function(event) {

    var dt = event.dataTransfer;
    var fileList = dt.files;

    // do stuff with the file list...
});

知道为什么会这样吗？我究竟做错了什么？有没有一种方法来附着drop事件要么window或document或document.body使用jQuery？

Answer 1

错误消息或arguments数组TypeError可以更容易地告诉问题发生在哪里,但是你的问题很可能不是在bind上发生,而是在你的回调中.

jQuery使用规范化的事件对象.该对象没有dataTransfer属性,因此您的var dt = event.dataTransfer行dt未定义.当你去下一行访问filesundefined 的属性时dt,你会得到一个TypeError.

您可以使用其所有"常规"属性访问本机的非规范化事件对象event.originalEvent,因此在使用jQuery时,您需要执行以下操作:

$(window).on('drop', function(event) {

    var dt = event.originalEvent.dataTransfer;
    var fileList = dt.files;

    // do stuff with the file list...
});