Cómo evitar que el texto seleccione un lienzo de HTML5 externo al hacer doble clic en?

Question

(en cada navegador que he intentado) al hacer doble clic en un lienzo de HTML5 se selecciona cualquier texto inmediatamente posterior al elemento de lienzo. Prefiero mantener los clics confinados en el lienzo.

(Nb: No deseo deshabilitar por completo la selección de texto (p. Ej., Como this): si hace doble clic en el texto, debería seleccionarse. Simplemente no quiero que los clics se "escapen" del lienzo .)

¿Esto es posible?

Aquí está a simple page que demuestra el problema.

Answer 1

En primer lugar, déjenme señalar que su lienzo no cubre el ancho de la página, solo tiene 100 píxeles de ancho. Los atributos de lienzo ancho y alto siempre se analizan en píxeles, por lo que escribir ancho = "100%" solo significa 100 píxeles en lo que respecta a la etiqueta Canvas.

Para responder a su pregunta, escribir en javasript:

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

El problema doble clic en el texto ya no se producirá.

Answer 2

Me he encontrado con una circunstancia muy similar en la que estaba habilitando la capacidad de arrastrar y soltar elementos alrededor de la página usando javascript.

Para resolver este problema, tiene la capacidad de capturar el evento de selección de texto y al capturar el evento si devuelve falso, la selección nunca tendrá lugar.

Para un buen ejemplo de este objeto de un uso, por favor, referencia: http://www.dynamicdrive.com/dynamicindex9/noselect.htm

Alternativamente, si usted está familiarizado con el marco jQuery, un plugin perfectamente simple y eficaz está disponible en: http://chris-barr.com/entry/disable_text_selection_with_jquery/

Apuestas suerte ¡para ti!

Answer 3

Intente poner su objeto canvas en un div después de todos los demás HTML. Tuve este problema, todo lo que tuve que hacer fue colocar mis divs CSS flotantes antes (arriba) de la etiqueta canvas en el código (que estaba en un div).

Pensé que escribiría esto por si acaso ayuda a alguien más.