Question

我有一个文件拖放功能它只会在Firefox中告诉我＆＃34; e.originalEvent.dataTransfer.types.contains不是函数＆＃34;。经过一些调试后，我发现了＆＃34; e＆＃34;是不确定的，我不知道为什么，任何想法？

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
  ...
  从Firefox 52开始，DataTransfer.types属性返回冻结   根据规范DOMStrings的数组，而不是DOMStringList。

过时的DomStringList类型有.contains()方法但不是Array

使用.includes()或.indexOf()代替

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

或者

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

＆＃34; E＆＃34;仅在Firefox中未定义

1 个答案: