javascript - "e"仅在 Firefox 中未定义

Question

我有这个文件拖放功能，它只会在 Firefox 中中断，告诉我“e.originalEvent.dataTransfer.types.contains 不是一个函数”。经过一番调试后，我发现“e”未定义，我不知道为什么，有什么想法吗？

if(mozilla){
    $('body').on('dragover', function (e) {
        <?php // hack because if not breaks browser ?>
        if($('#customIframe').length > 0){
            return;
        }
        e.originalEvent.stopPropagation();
        e.originalEvent.preventDefault();
        if ((!$('#smartUploadOverlay').is (':visible') ||
                ($('#smartUploadPopup').is (':visible')
                        && !$('#smartUploadDrag').is (':visible'))) &&
                e.originalEvent.dataTransfer.types.length < 5 &&
                e.originalEvent.dataTransfer.types.contains("Files")){
            smartUploader.toggle();
        }
    });
    $('body').on('dragleave', function (e) {
        <?php // hack because if not breaks browser ?>
        if($('#customIframe').length > 0){
            return;
        }
        e.originalEvent.stopPropagation();
        e.originalEvent.preventDefault();
        if ($('#smartUploadOverlay').is (':visible') &&
                e.originalEvent.dataTransfer.types.length < 5 &&
                e.originalEvent.dataTransfer.types.contains("Files")){
            smartUploader.toggle();
        }
    });

    $('#smartUploadOverlay').hover(
            function () {
                $('#smartUploadDrag').removeClass('hover');
            },
            function () {
                $('#smartUploadDrag').addClass('hover');
            });
} else {
    $('body').on('dragenter', function (e) {
        <?php // hack because if not breaks browser ?>
        if($('#customIframe').length > 0){
            return;
        }
        if (ie && !ie10 && $('.alertErrorMessageContainer').length == 0){
            showAlertMessage('<?php echo langEcho("drag:n:drop:not:supported")?>');
            return;
        }
        e.originalEvent.stopPropagation();
        e.originalEvent.preventDefault();
        if (    e.originalEvent.dataTransfer
             && (
                    (   e.originalEvent.dataTransfer.files
                    &&  e.originalEvent.dataTransfer.files.length > 0)
                ||  (   $.isArray(e.originalEvent.dataTransfer.types)
                    &&  e.originalEvent.dataTransfer.types.indexOf("Files") > -1)
                ||  (   e.originalEvent.dataTransfer.types
                    &&  !$.isArray(e.originalEvent.dataTransfer.types)
                    &&  e.originalEvent.dataTransfer.types.contains("Files"))
                )
            ){
                smartUploader.toggle();
        }
    });

    $('body').on('dragleave', function (e) {
        <?php // hack because if not breaks browser ?>
        if($('#customIframe').length > 0){
            return;
        }
        if (ie && !ie10){
            return;
        }
        e.originalEvent.stopPropagation();
        e.originalEvent.preventDefault();
        if (    e.originalEvent.dataTransfer
             && (
                    (   e.originalEvent.dataTransfer.files
                    &&  e.originalEvent.dataTransfer.files.length > 0)
                ||  (   $.isArray(e.originalEvent.dataTransfer.types)
                    &&  e.originalEvent.dataTransfer.types.indexOf("Files") > -1)
                 ||  (  e.originalEvent.dataTransfer.types
                    &&  !$.isArray(e.originalEvent.dataTransfer.types)
                    &&  e.originalEvent.dataTransfer.types.contains("Files"))
                )
            ){
                smartUploader.toggle();
            }
    });

Answer 1

DataTransfer.types
...
As of Firefox 52, the DataTransfer.types property returns a frozen array of DOMStrings as per spec, rather than a DOMStringList.

过时的 DomStringList 类型具有 .contains() 方法，但没有 Array

<小时/>

使用.includes()或.indexOf()相反

if (e.originalEvent.dataTransfer.types.includes("Files")) { ... }

或者

if (e.originalEvent.dataTransfer.types.indexOf("Files") > -1) { ... }