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 之類的東西。 我希望這有幫助。