我正在使用easlejs phonegap进行
HTML5游戏,并且遇到问题,每当您在画布上点击/ touch / mousedown时,屏幕会闪烁.
下面是我创建的非常简单的代码来测试问题,看看它是否与easlejs有关.从代码中可以看出,它与easlejs无关,只是一个html5 / phonegap问题.
你可以看到我也试过没有选择的CSS样式没有运气.
<!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>
解决方法
编辑：发现EaselJS仍然有触摸显示选择的错误.要解决这个问题,我在阅读了这篇文章之后,在画布中添加了一个CSS属性：
https://stackoverflow.com/a/7981302/66044
修复是：
-webkit-tap-highlight-color：transparent;
能够在本文的帮助下解决这个问题：
How to handle touch events in IOS and Android?
这是工作代码.修复程序是处理touchstart / end事件来处理点击.不再经历橙色选择阶段.
在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",h);
// FIX: Cancel the event
e.preventDefault();
},false);
</script>
</body>
</html>
