Prevenir la selección accidental/arrastrar resaltar

Question

Tengo una aplicación de dibujo usando el lienzo html5. Cuando el usuario está dibujando y la pluma se desliza fuera del área del lienzo, Chrome resalta los elementos html en la página en azul claro o amarillo.

Esto es perjudicial para la experiencia de dibujo. ¿Hay alguna manera de evitar que suceda este destacado?

La manipulación y elaboración código de evento se basa fuera de este post: 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) ; 
}) ; 

Si agrega algunas etiquetas h1 por encima de las etiquetas de lona a continuación se basan en el lienzo, arrastrando fuera del cuadro delimitador, verá un punto culminante azul. ¿Hay alguna forma de prevenir este comportamiento?

Answer 1

Aplica la siguiente clase de CSS a los elementos que deberían ser no seleccionables. También se puede aplicar al cuerpo (aunque las mejores prácticas podrían ser solo deshabilitar la selección del usuario en los elementos que realmente lo necesitan).

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

JS (sólo es necesario para IE < 10):

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

fuera de tema pero también podría ser interesing para la aplicación: Si selecciona una gran anchoLinea en el jsFiddle y mover el mouse muy lentamente, puede ver algunos efectos feos (bloques) en los bocetos. Siempre verifique que la distancia desde el movimiento en movimiento (mientras arrastra) a la última coordenada no sea demasiado pequeña. Por ejemplo, solo agregue las coordenadas al boceto si la distancia es más de aproximadamente 1/6 de la línea con.

Answer 2

Pruebe esta secuencia de comandos, deshabilitaría la selección si el arrastre se establece en verdadero. De esta forma, aún puede seleccionar texto cuando no está dibujando.

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

Answer 3

No utilizaría el documento .onselectstart. Todo lo que tiene que hacer es poner esto en el lienzo en cuestión en su lugar:

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

Además se podría capturar el ratón hacia abajo/Mover/a acontecimientos que están ocurriendo en el lienzo estableciendo el último argumento de addEventListener a true. esto permitirá que su dibujo continúe perfectamente incluso si el mouse deja el lienzo.