0

ファイルのドラッグ アンド ドロップを行うときに、jQueryon()メソッドdropを使用して、イベントをブラウザー ウィンドウにアタッチしようとしています...

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

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

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

...しかし、私は取得していTypeErrorます:

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...
});

なぜこれが起こっているのですか？私は何を間違っていますか？またはまたはjQueryを使用してdropイベントを添付する方法はありますか?windowdocumentdocument.body

4

1 に答える 1

6

エラー メッセージまたは のarguments配列によりTypeError、問題が発生している場所を簡単に特定できますが、実際にはバインドではなく、コールバック内で問題が発生している可能性があります。

jQuery は正規化されたイベント オブジェクトを使用します。そのオブジェクトにはdataTransferプロパティがないため、var dt = event.dataTransfer行はdt未定義になっています。次の行でfiles未定義のプロパティにアクセスすると、 .dtTypeError

ネイティブの正規化されていないイベント オブジェクトに、そのすべての「通常の」プロパティを使用して からアクセスできます。そのevent.originalEventため、jQuery を使用する場合は、次のようにします。

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

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

    // do stuff with the file list...
});
于 2012-06-08T02:20:28.990 に答える