Sự kiện dán JavaScript hoạt động tốt trong Chrome nhưng không phải Firefox

Question

Mục tiêu ban đầu của tôi là lấy hình ảnh được dán từ khay nhớ tạm. Nhưng tôi đã gặp rắc rối khi nhận được sự kiện dán.

Trong JSFiddle, nơi tôi sao chép các vấn đề, HTML chỉ chứa một div:

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

JavaScript đầu tiên liên kết với chức năng handlePaste của tôi() sự kiện dán.

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

Chức năng này được cho là được gọi khi người dùng nhấn Ctrl + V hoặc chọn "dán" trong trình đơn của trình duyệt.

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); 
    } 
} 

Quan trọng: chức năng đó truy cập e.clipboardData để nhận nội dung của khay nhớ tạm. Ví dụ: nếu bạn nhấn phím PrtScrn, sau đó nhấn Ctrl + V, bạn sẽ gửi hình ảnh màn hình in đến phương thức handlePaste. Cảnh báo cuối cùng hiển thị "hình ảnh/png" khi hoạt động tốt.

Chrome v37: JsFiddle hoạt động tốt. Firefox v32: phương thức handlePaste() không được gọi, cảnh báo đầu tiên không bật lên.

Mã jsFiddle: http://jsfiddle.net/demeylau/ke44bufm/1/

Answer 1

Theo như tôi có thể nói, bạn sẽ phải xử lý dán riêng biệt cho mỗi đại lý của trình duyệt. Joshua Gross bao gồm rất nhiều sự phức tạp của sự kiện dán trong bài viết này: Paste Wasteland

Firefox thích bị ngớ ngẩn hơn, nhưng có thể đọc dữ liệu hình ảnh dưới dạng tệp bằng cách xử lý dữ liệu khay nhớ tạm làm Blob. Đây là khá nhiều mã di sản chưa được giải quyết trong các trình duyệt xử lý các sự kiện hệ điều hành theo những cách hơi khác nhau và tóm tắt ngắn gọn lý do tại sao chúng tôi có các tính năng mới hơn được tiêu chuẩn hóa trong những thứ như WebAPI. Tôi hy vọng điều này sẽ hữu ích.