firefox ondrop event.dataTransfer 更新到版本 52 后为空答案

【问题标题】：firefox ondrop event.dataTransfer is null after update to version 52firefox ondrop event.dataTransfer 更新到版本 52 后为空
【发布时间】：2017-08-28 01:27:53
【问题描述】：

简介：

大约在 2017 年 3 月中旬，在将 Firefox 更新到版本 52 后，某些功能（拖放和粘贴）无法正常运行。正如它在调试时显示的那样，事件的属性“dataTransfer”现在设置为 null。

在更新之前，onDrop 和 onPaste 事件都将 dataTransfer 属性设置为要删除或粘贴的内容。

问题：

在实际浏览器中应该如何处理拖放和粘贴？这些天有什么必要的预防措施吗？现在有限制行为背后的原因的解释吗？

互联网上是否有任何示例显示如何使用实际浏览器完成任务？

我不要求 Firefox 48 版本之前的示例，因为至少在那个版本之前，整个事情都完美无缺。我不要求使用 jQuery 或任何其他库的示例（如果它们是作为附加补充提供的，我不会拒绝这些示例）。我确实要求使用简单的原生 javascript 示例。

【问题讨论】：

尝试安装旧版本的 Firefox，问题 - 更新到版本 52 时停止功能 - 是可重复且稳定的。
这能回答你的问题吗？ event.dataTransfer.files is empty when ondrop is fired?

标签： javascript firefox events drag-and-drop

【解决方案1】：

一步步调试的时候，dataTransfer的数据好像丢失了。可能是因为调试中涉及的事件。读取dataTransfer(ev.dataTransfer.getData)后开始一步步调试，你会看到dataTransfer不再为空了。

【讨论】：

感谢您的回答。我正要放弃并说Firefox刚刚坏了。
在没有任何调试的情况下，Firefox 69（64 位）的 dataTransfer 仍然为空
原来在 drop 事件中调用 alert() 函数也会使 event.datatransfer 为空。删除这些使得 event.datatransfer 在 Firefox 69（64 位）中工作。
@atomkirk 事实上，在调试器中运行一个函数和在没有调试器的情况下运行相同的函数会产生不同的结果，完全可以证明它被破坏了。
这是如何存在的，以及烦人的开发人员，3 年 仍然没有修复/有据可查？

【解决方案2】：

使用最新版本的 FF（当前为 73.0.1）dataTransfer 仅在调试 drop 事件处理程序（即通过断点或debugger 语句）时显示为null。不调试该功能使其正常工作。

【讨论】：

【解决方案3】：

我遇到了类似的问题。

我们需要为 dataTransfer 设置一些属性值。

例如，在您的 dragstart 中设置 eventObj.dataTransfer.effectAllowed = "move"; 以及 eventObj.dataTransfer.setData("text", "data");功能。

  function dragStart(eventObj) {
    eventObj.dataTransfer.setData("text",  "data");
    eventObj.dataTransfer.effectAllowed = "move";
  }

您必须防止发生元素的默认操作。通过使用 eventObj.preventDefault(); 并且需要在您的拖动功能中设置 eventObj.dataTransfer.dropEffect = "move"; 。

function dragOver(eventObj) {
    eventObj.preventDefault();
    eventObj.dataTransfer.dropEffect = "move";
  }

在 drop 函数中，您还必须停止默认操作，否则 firefox 将使用您在 dataTransfer api 中传递的任何数据打开新页面。

 function drop(eventObj) {
    vardata = eventObj.dataTransfer.getData("text");
    eventObj.preventDefault();
}

我希望它能解决您在 Firefox 中的问题。

快乐编码

【讨论】：

设置后dataTransfer.effectAllowed = "move";在 dragStart 和 dataTransfer.dropEffect = "move";在dragOver 函数中，dataTransfer 在dragDrop 函数中仍然为空。

【解决方案4】：

我从这个页面上的代码开始遇到同样的问题：https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop：dataTransfer 对象是null，所以我无法访问删除的文件：event.dataTransfer.items;

我已经解决了在调用ev.preventDefault();之前提取该区域中的已删除文件的问题

这里是我修改的方法：

function dropHandler(ev) {
    console.log('File(s) dropped');
    const _files = ev.dataTransfer.items;
    // Prevent default behavior (Prevent file from being opened)
    ev.preventDefault();

    if (_files) {
        // Use DataTransferItemList interface to access the file(s)
        for (var i = 0; i < ev.dataTransfer.items.length; i++) {
            // If dropped items aren't files, reject them
            if (ev.dataTransfer.items[i].kind === 'file') {
                const file = ev.dataTransfer.items[i].getAsFile();
                console.log('... file[' + i + '].name = ' + file.name);
            }
        }
    } else {
        // Use DataTransfer interface to access the file(s)
        for (const i = 0; i < ev.dataTransfer.files.length; i++) {
            console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
        }
    }
}

【讨论】：

【解决方案5】：

我刚刚用 dragstart 改变了拖动事件

drag.addEventListener('dragstart', e => {
    e.dataTransfer.setData("key", "val");
})

【讨论】：