Làm cách nào để ngăn văn bản chọn bên ngoài canvas HTML5 khi nhấp đúp?

Question

(Trong mọi trình duyệt tôi đã thử), việc nhấp đúp vào canvas HTML5 sẽ chọn bất kỳ văn bản nào ngay sau yếu tố canvas. Tôi muốn giữ các nhấp chuột bị giới hạn trong canvas.

(Nb: Tôi không muốn tắt hoàn toàn lựa chọn văn bản (ví dụ như this): nếu bạn nhấp đúp vào văn bản cần chọn, tôi chỉ không muốn nhấp chuột "bị rò rỉ" từ canvas .)

Điều này có khả thi không?

Đây là a simple page minh họa sự cố.

Answer 1

Trước tiên hãy để tôi lưu ý rằng canvas của bạn không làm đầy chiều rộng của trang, nó chỉ rộng 100 pixel. Các thuộc tính canvas chiều rộng và chiều cao luôn phân tích cú pháp thành pixel, do đó, viết chiều rộng = "100%" chỉ có nghĩa là 100 pixel cho đến khi thẻ Canvas được quan tâm.

Để trả lời câu hỏi của bạn, hãy viết trong JavaScript:

//give your canvas an id, I used 'can'  
var canvas = document.getElementById('can'); 
canvas.onselectstart = function() { return false; } 

Vấn đề văn bản double-click sẽ không còn xảy ra.

Answer 2

Tôi đã chạy vào một trường hợp rất giống nhau, nơi tôi đã cho phép khả năng kéo và thả các phần tử xung quanh trang bằng javascript.

Để giải quyết vấn đề này, bạn có khả năng nắm bắt sự kiện chọn văn bản và khi chụp sự kiện nếu bạn trả về sai, lựa chọn sẽ không bao giờ diễn ra.

Đối với một ví dụ tốt về điều này được đưa vào sử dụng, xin vui lòng tham khảo: http://www.dynamicdrive.com/dynamicindex9/noselect.htm

Cách khác nếu bạn đã quen thuộc với khuôn khổ jQuery, một plugin hoàn toàn đơn giản và hiệu quả có sẵn tại địa chỉ: http://chris-barr.com/entry/disable_text_selection_with_jquery/

Bets may mắn cho bạn!

Answer 3

Thử đặt đối tượng canvas của bạn vào div sau tất cả các HTML khác. Tôi đã có vấn đề này, tất cả tôi phải làm là đặt div CSS nổi của tôi trước (trên) thẻ vải trong mã (được chứa trong một div).

Chỉ cần nghĩ rằng tôi muốn viết điều này chỉ trong trường hợp nó giúp bất kỳ ai khác.