Cómo deshabilitar seleccionar elemento de lienzo html5

Question

Escucho los eventos de clic dentro de un lienzo html5 y funciona muy bien. Sin embargo, cuando hago clic en cualquier lugar de la imagen, el navegador lo resalta como si hubiera sido seleccionado (similar a cómo una imagen puede verse resaltada si se hace clic en una página). Tenía curiosidad si alguien supiera cómo desactivar la selección de elementos html como canvas. No quiero que el lienzo aparezca delineado cuando alguien hace clic en él.

Answer 1

Usted podría intentar aplicar algunas reglas CSS a lo largo de los siguientes:

user-select: none; 
-webkit-user-select: none; 
-moz-user-select: none; 

Como se mencionó Michael disableTextSelect de jQuery vale la pena ver. Incluso si no terminas usándolo, estudiar la fuente puede darte una idea.

Answer 2

Yo usaría jQuery. $('.noSelect').disableTextSelect();

Answer 3

Ir de bebraw, ir salvaje con estilos CSS y añadir esto en la cabeza:

<style type="text/css"> 
    canvas { 
     -webkit-touch-callout: none; 
     -webkit-user-select: none; 
     -khtml-user-select: none; 
     -moz-user-select: none; 
     -ms-user-select: none; 
     user-select: none; 
     outline: none; 
     -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */ 
    } 
</style> 

Answer 4

Sólo la última de esas reglas CSS pareció hacerlo. Las otras reglas juntas no funcionaron (en Safari iOS5) hasta que agregué la última.

-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 

Answer 5

Poco relacionado: si el problema es que el cursor se convierte en el icono de selección (. Por ejemplo cuando se arrastra en el lienzo), puede desactivar que ya sea por este CSS en el lienzo:

cursor: default; 

o evitar el comportamiento predeterminado del evento en el controlador de mousedown:

event.preventDefault();