JavaScript 粘贴事件在 Chrome 中运行良好，但在 Firefox 中运行不正常

Question

我最初的目标是从剪贴板中粘贴一张图片。但是我在获取粘贴事件时遇到了麻烦。

在我重现问题的 JSFiddle 中，HTML 仅包含一个 div:

<div style="width: 200px; height: 200px; background: grey" id="pasteTarget" > </div>

JavaScript 首先将我的函数 handlePaste() 绑定(bind)到粘贴事件。

window.onload = function() {
    //adding paste event listener on the div
    document.getElementById("pasteTarget").
        addEventListener("paste", handlePaste);
};

应该在用户按下 Ctrl+V 或在浏览器菜单中选择“粘贴”时调用此函数。

function handlePaste(e) {
    alert("I'm in handlePaste");    
    for (var i = 0 ; i < e.clipboardData.items.length ; i++) {
         var item = e.clipboardData.items[i];
         console.log("Item: " + item.type);
         alert(item.type);
     }   
}

重要提示:该函数访问 e.clipboardData 以获取剪贴板的内容。例如，如果您按 PrtScrn 键，然后按 Ctrl+V，则会将打印屏幕图像发送到 handlePaste 方法。当它工作正常时，最后一个警报会显示“image/png”。

Chrome v37:JsFiddle 工作正常。Firefox v32: 未调用 handlePaste() 方法，第一个警告不弹出。

jsFiddle 代码:http://jsfiddle.net/demeylau/ke44bufm/1/

Answer 1

据我所知，您将不得不针对每个浏览器代理单独处理粘贴。Joshua Gross 在这篇文章中介绍了粘贴事件的许多复杂之处:Paste Wasteland

Firefox 喜欢更迟钝，但可以通过将剪贴板数据视为 Blob 来将图像数据作为文件读取。 (见格罗斯文章后记)这是浏览器中几乎未处理的遗留代码，以略有不同的方式处理操作系统事件，并简洁地总结了为什么我们在 WebAPI 等方面拥有标准化的大多数新功能。我希望这会有所帮助。