1. Inicio
  2. Pregunta y respuesta
  3. Clic con el mouse (o toque) eventos en el lienzo provoca la selección usando HTML5, Phonegap y Android

Clic con el mouse (o toque) eventos en el lienzo provoca la selección usando HTML5, Phonegap y Android

2012-06-03 19 views
13

Estoy trabajando en un juego HTML5 usando easlejs + phonegap y estoy corriendo un problema donde la pantalla parpadea cada vez que hace clic/toque/mousedown lona.Clic con el mouse (o toque) eventos en el lienzo provoca la selección usando HTML5, Phonegap y Android

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 puede ver en el código, no tiene nada que ver con easlejs y es solo un problema html5/phonegap.

Puede ver También probé los estilos CSS sin seleccionar a la suerte.

screenshots showing the orange border when holding mouse down on the canvas (1st image) and then releaseing it (2nd image) 

<!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>

Fuente

2012-06-03 Gautam

+0

quizá: document.addEventListener ("selectstart", function() {return false;}); y lo mismo para el evento dragstart ... – Zevan

+0

Desafortunadamente eso no ayudó. Incluso intenté agregar el evento en el lienzo. – Gautam

Respuesta

18

Editar: Resultó EaselJS todavía tenían el error por el que el toque mostró una selección. Para resolver este añadí una propiedad CSS a la lona 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: Prevent page scroll on drag in IOS and Android

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

probado esto, tanto en el emulador y 2.2 mi dispositivo (Samsung Captivate ejecuta 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>

Fuente

2012-06-03 13:36:28 Gautam

+0

¡Gracias! Solo necesitaba la parte CSS, pero no puedo creer lo difícil que fue encontrar a alguien más que tuviera el mismo problema con el parpadeo cada vez que tocaba un botón activo en mi sitio móvil. Fue muy molesto y no fue visualmente útil para mis visitantes ya que les proporciono suficiente información visual inmediata sin el "parpadeo" ... – exoboy

Cuestiones relacionadas

 Cuestiones relacionadas