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

Question

我最初的目标是从剪贴板粘贴图像.但是我遇到了粘贴事件的麻烦.

在JSFiddle中,我重现了这个问题,HTML只包含一个div:

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

JavaScript首先将我的函数handlePaste()绑定到paste事件.

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 在这篇文章中介绍了粘贴事件的许多复杂之处：粘贴荒地

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