鼠标在画布上单击(或触摸)事件会导致使用HTML5,Phonegap和Android进行选择
Gau*_*tam 13 html5 android easeljs cordova
我正在使用easlejs + phonegap处理HTML5游戏,并且遇到了每次在画布上单击/触摸/ 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>
Gau*_*tam 18
编辑:结果EaselJS仍然有触摸显示选择的错误.为解决这个问题,我在阅读本文后向画布添加了一个CSS属性:https://stackoverflow.com/a/7981302/66044
修复是:
-webkit-tap-highlight-color: transparent;
能够在本文的帮助下解决这个问题: 在IOS和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", 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>
| 归档时间： |
|
| 查看次数： |
13976 次 |
| 最近记录： |