1. Dom
  2. Pytanie i odpowiedź
  3. Zdarzenia kliknięcia myszą (lub dotyk) na płótnie powodują zaznaczenie przy użyciu HTML5, Phonegap i Androida

Zdarzenia kliknięcia myszą (lub dotyk) na płótnie powodują zaznaczenie przy użyciu HTML5, Phonegap i Androida

2012-06-03 15 views
13

Pracuję nad grą HTML5 za pomocą easlejs + phonegap i mam problem z ekranem, który miga za każdym razem, gdy klikniesz/dotrzesz/wysyłasz na ekranie brezentowy.Zdarzenia kliknięcia myszą (lub dotyk) na płótnie powodują zaznaczenie przy użyciu HTML5, Phonegap i Androida

Poniżej znajduje się bardzo prosty kod, który stworzyłem, aby przetestować problem i sprawdzić, czy jest on powiązany z easlejs. Jak widać z kodu, nie ma to nic wspólnego z easlejs i jest tylko kwestią html5/phonegap.

Możesz zobaczyć, że próbowałem również bez wyboru stylów CSS bez powodzenia.

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>

Źródło

2012-06-03 Gautam

+0

może: document.addEventListener ("selectstart" funkcja() {zwraca fałsz;}); i tak samo dla zdarzenia dragstart ... – Zevan

+0

Niestety to nie pomogło. Nawet próbował dodać wydarzenie na płótnie. – Gautam

Odpowiedz

18

EDIT: Okazało się EaselJS jeszcze bug gdzie dotyk pokazał wybór. Aby to rozwiązane dodałem właściwość CSS na płótnie po przeczytaniu tego artykułu: https://stackoverflow.com/a/7981302/66044

Rozwiązaniem było: -webkit-tap-highlight-color: transparent;

Był w stanie rozwiązać ten problem za pomocą tego artykułu: Prevent page scroll on drag in IOS and Android

Oto działający kod. Poprawka polega na obsłudze zdarzeń touchstart/end, aby obsłużyć kliknięcia. Nie doświadczasz już pomarańczowego etapu selekcji.

przetestowane zarówno w emulatorze 2.2 i moje urządzenie (Samsung Captivate uruchomione 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>

Źródło

2012-06-03 13:36:28 Gautam

+0

Dzięki! Potrzebowałem tylko części CSS, ale nie mogę uwierzyć, jak trudno było znaleźć każdego, kto miał ten sam problem z migotaniem za każdym razem, gdy dotykałem aktywnego przycisku w mojej witrynie mobilnej. To było bardzo rozpraszające i nie było wizualnie pomocne dla moich gości, ponieważ zapewniłem im wystarczająco natychmiastową, wizualną informację zwrotną bez "migotania" ... – exoboy

Powiązane problemy

 Powiązane problemy