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

Question

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

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

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

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

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 事件的很多复杂性：Paste Wasteland

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