マウスクリック（またはタッチ）イベントは、画面の点滅が毎回あなたが上/タッチ/マウスダウンをクリックしてHTML5、PhoneGapのとAndroid

私はeaslejs +のPhoneGapを使ってHTML5ゲームに取り組んでいますし、問題に実行しています

を使用して選択を引き起こしキャンバス。マウスクリック（またはタッチ）イベントは、画面の点滅が毎回あなたが上/タッチ/マウスダウンをクリックしてHTML5、PhoneGapのとAndroid

以下は、私は問題をテストし、それがeaslejsに関連していたかどうかを確認するために作成された非常に簡単なコードです。コードからわかるように、easlejsとは関係なく、html5/phonegapの問題です。

私はまた、no select CSSスタイルを試してみることができます。

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>

出典

2012-06-03 Gautam

多分：document.addEventListener（ "selectstart"、機能（）{falseを返します;}）; dragstartイベントにも同じです... – Zevan

残念ながら、それは助けになりませんでした。キャンバスにイベントを追加しようとしても。 – Gautam

編集：EaselJSはまだタッチが選択を示したバグがありましたが判明。これを解決するために、私はこの記事を読んだ後、キャンバスにCSSプロパティを追加しました：修正が

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

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

は、この記事の助けを借りてこの問題を解決することができました

ここに作業コードがあります。修正は、クリックを処理するためにタッチスタート/エンドイベントを処理することです。オレンジの選択段階を経験しなくなりました。

2.2エミュレータと私のデバイス（サムスンCaptivateには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>

出典

2012-06-03 13:36:28 Gautam

ありがとう！私はCSSの部分しか必要としませんでしたが、モバイルサイトのアクティブなボタンに触れるたびに、同じ問題を抱えている他の誰かを見つけることがどれほど難しいかは信じられません。それは非常に気を散らし、視覚的に私の訪問者に役立つものではなかったので、私は彼らに「フリッカー」なしで十分な即時の視覚的フィードバックを提供しています。 – exoboy

-webkit-TAP-ハイライト色の両方でこれをテストした：RGBA（0,0,0,0）。/* 1.0への最後の値の不透明度0を調整し、透明のリンクの選択を行う*/

参照：https://github.com/phonegap/phonegap-start/blob/master/www/css/index.css

出典

2013-02-09 01:52:33 Henry

マウスクリック（またはタッチ）イベントは、画面の点滅が毎回あなたが上/タッチ/マウスダウンをクリックしてHTML5、PhoneGapのとAndroid

答えて

関連する問題