1. ev
  2. Soru-cevap
  3. Tuval üzerinde tıklama (veya dokunma) olayları HTML5, Phonegap ve Android kullanarak seçim yapılmasına neden olur.

Tuval üzerinde tıklama (veya dokunma) olayları HTML5, Phonegap ve Android kullanarak seçim yapılmasına neden olur.

2012-06-03 14 views
13

Kolayca bir HTML5 oyunu üzerinde easlejs + phonegap kullanarak çalışıyorum ve/touch/mousedown seçeneğini tıkladığınızda ekranın her yanıp söndüğü bir sorunla karşılaşıyorum. tuval.Tuval üzerinde tıklama (veya dokunma) olayları HTML5, Phonegap ve Android kullanarak seçim yapılmasına neden olur.

Sorunu test etmek ve easlejs ile ilgili olup olmadığını görmek için oluşturduğum çok basit kod aşağıdadır. Koddan görebileceğiniz gibi easlejs ile ilgisi yoktur ve sadece bir html5/phonegap sorunudur.

Ayrıca hiçbir seçim CSS stilini şanssız denedim de görebilirsiniz.

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>

kaynak

2012-06-03 Gautam

+0

belki: document.addEventListener ("selectstart", fonksiyon() {return false;}); ve dragstart olayı için aynı ... – Zevan

+0

Ne yazık ki bu yardımcı olmadı. Etkinliği tuval üzerine eklemeyi bile denedim. – Gautam

cevap

18

Düzenleme: çıktı EaselJS hala dokunmatik bir seçim gösterdi hata vardı. Bu çözüldü için ben bu yazıyı okuduktan sonra tuvale CSS özelliği ekledi: düzeltme

https://stackoverflow.com/a/7981302/66044 oldu: Prevent page scroll on drag in IOS and Android

: -webkit-tap-highlight-color: transparent;

Bu maddenin yardımı ile bu sorunu çözmek mümkün oldu

İşte çalışma kodu. Düzeltme, tıklamaları işlemek için touchstart/end olaylarını ele almaktadır. Artık turuncu seçim aşamasını yaşamayacaksınız.

hem 2.2 emülatörü bu test cihazım 

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

kaynak

2012-06-03 13:36:28 Gautam

+0

Teşekkürler! Sadece CSS bölümüne ihtiyacım vardı, ancak mobil sitemde aktif bir tuşa her dokunduğumda titremeyle aynı sorunu yaşayan herkesi bulmak ne kadar zordu. "Titremesiz" olmadan yeterince acil, görsel geri bildirim sağladığımdan beri çok dikkatimi dağıtan ve ziyaretçilere görsel olarak yararlı olmayan ... – exoboy

İlgili konular

 İlgili konular