El clic del ratón (o el tacto) en el lienzo provoca la selección usando HTML5, Phonegap y Android

Estoy trabajando en un juego HTML5 usando easlejs + phonegap y estoy corriendo en un problema donde la pantalla parpadea cada vez que haga clic en / touch / mousedown en el lienzo.

A continuación se muestra el código muy simple que he creado para probar el problema y ver si estaba relacionado con easlejs. Como se puede ver en el código no tiene nada que ver con easlejs y es sólo un problema html5 / phonegap.

Usted puede ver que también he intentado el no seleccionar estilos CSS a ninguna suerte.

Capturas de pantalla que muestran el borde naranja al mantener el ratón sobre el lienzo (1ª imagen) y luego liberarlo (2ª imagen)

<!doctype html> <html> <head> <title></title> <style type="text/css"> #canvas { user-select: none; -webkit-user-select: none; -moz-user-select: none; } </style> </head> <body> <canvas id="canvas" width="320" height="480"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); canvas.addEventListener("mousedown", function(e) { var ctx = canvas.getContext("2d"); var x = Math.random() * 320; var y = Math.random() * 480; var w = Math.random() * 100; var h = Math.random() * 100; ctx.fillStyle = "#FF0000"; ctx.fillRect(x,y,w,h); }, false); </script> </body> </html>

Edit: Resultó que EaselJS todavía tenía el bicho donde el toque mostraba una selección. Para resolver esto agregué una propiedad CSS al lienzo después de leer este artículo: https://stackoverflow.com/a/7981302/66044

La solución fue: -webkit-tap-highlight-color: transparent;

Fue capaz de resolver esto con la ayuda de este artículo: Evitar la página de desplazamiento en arrastrar en IOS y Android

Aquí está el código de trabajo. La solución consiste en manejar los eventos touchstart / end para manejar los clics. Ya no experimenta la etapa de selección naranja.

Probado esto en el emulador 2.2 y mi dispositivo (Samsung Captivate que funciona Cyanogenmod ICS)

 <!doctype html> <html> <head> <title></title> </head> <body> <canvas id="canvas" width="320" height="480"></canvas> <script type="text/javascript" src="cordova-1.7.0.js"></script> <script type="text/javascript"> var canvas = document.getElementById("canvas"); // FIX: Cancel touch end event and handle click via touchstart document.addEventListener("touchend", function(e) { e.preventDefault(); }, false); canvas.addEventListener("touchstart", function(e) { var ctx = canvas.getContext("2d"); var x = Math.random() * 320; var y = Math.random() * 480; var w = Math.random() * 100; var h = Math.random() * 100; ctx.fillStyle = "#FF0000"; ctx.fillRect(x,y,w,h); // FIX: Cancel the event e.preventDefault(); }, false); </script> </body> </html>

-webkit-tap-highlight-color: rgba (0,0,0,0); / * Hacer la selección transparente del acoplamiento, ajustar la última opacidad del valor 0 a 1.0 * /

Consulte: https://github.com/phonegap/phonegap-start/blob/master/www/css/index.css