Ngăn chặn chọn ngẫu nhiên/kéo nổi bật

Question

Tôi có ứng dụng vẽ bằng canvas html5. Khi người dùng đang vẽ và bút trượt ra khỏi khu vực canvas, chrome làm nổi bật các phần tử html trên trang có màu xanh nhạt hoặc vàng.

Điều này gây rối cho trải nghiệm vẽ. Có cách nào để ngăn chặn nổi bật như vậy xảy ra?

Sự kiện xử lý và bản vẽ đang dựa tắt của bài này: http://jsfiddle.net/rnNFB/1/

var x ; 
var y ; 

var lower = $('#lower').get(0).getContext('2d') ; 
var upper = $('#upper').get(0).getContext('2d') ; 

var dragging = false ; 

function drawStroke(ctx){ 
    var i ; 
    ctx.strokeStyle='rgba(0,0,0,0.5)' ; 
    ctx.lineWidth=10 ; 
    ctx.beginPath() ; 
    ctx.moveTo(x[0],y[0]) ; 
    for (i=1; i < x.length; i++){ 
     ctx.lineTo(x[i],y[i]) ; 
    } 
    ctx.stroke() ; 
} 

$('#upper').mousedown(function(e){ 
    x=[e.layerX]; 
    y=[e.layerY]; 
    dragging=true}) ; 

$('#upper').mousemove(function(e){ 
    if (dragging){ 
     x.push(e.layerX); 
     y.push(e.layerY); 
     upper.clearRect(0,0,upper.canvas.width,upper.canvas.height) ; 
     drawStroke(upper) ; 
    }}) ; 

$('#upper').mouseup(function(e){ 
    dragging = false ; 
    upper.clearRect(0,0,upper.canvas.width,upper.canvas.height) ; 
    drawStroke(lower) ; 
}) ; 

Nếu bạn thêm một số thẻ h1 trên các thẻ canvas sau đó vẽ trên vải, kéo bên ngoài hộp bounding, bạn sẽ thấy một điểm nhấn màu xanh lam. Có cách nào để ngăn chặn hành vi này không?

Answer 1

Áp dụng lớp CSS sau cho các thành phần không thể chọn được. Nó cũng có thể chỉ được áp dụng cho cơ thể (tuy nhiên, thực hành tốt nhất có thể là để chỉ vô hiệu hóa lựa chọn người dùng trên các yếu tố thực sự cần nó).

.unselectable { 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    user-select: none; 
} 

JS (chỉ cần thiết cho IE < 10):

// the onselectstart way for navigator.appName === "Microsoft Internet Explorer" 
document.onselectstart = function() { return false; }; 

off-topic nhưng nó cũng có thể được interesing cho các ứng dụng: Nếu bạn chọn một độ rộng vạch phổ lớn trong jsFiddle và di chuyển chuột rất chậm, bạn có thể thấy một số hiệu ứng xấu xí (khối) trong bản phác thảo. Luôn kiểm tra rằng khoảng cách từ phối hợp onmousemove (trong khi kéo) đến tọa độ cuối cùng không quá nhỏ. Ví dụ, chỉ thêm tọa độ vào bản vẽ nếu khoảng cách lớn hơn khoảng 1/6 của đường thẳng.

Answer 2

Hãy thử tập lệnh này, nó sẽ vô hiệu hóa lựa chọn nếu kéo được đặt thành true. Bằng cách này bạn vẫn có thể chọn văn bản khi bạn không vẽ.

document.onselectstart = function(e) { 
    if (dragging) { 
    e.preventDefault(); 
    return false; 
    } 
}; 

Answer 3

Tôi sẽ không sử dụng tài liệu .onselectstart. Tất cả bạn phải làm là đặt này trên vải trong câu hỏi thay vì:

canvas.onselectstart = function() { return false; };

Ngoài ra bạn có thể nắm bắt được chuột xuống/di chuyển/lên sự kiện đang xảy ra trên vải của bạn bằng cách thiết lập các tham số cuối cùng của addEventListener để true. điều này sẽ cho phép bản vẽ của bạn tiếp tục hoàn hảo ngay cả khi chuột rời khỏi canvas.