画布上的鼠标点击（或触摸）事件导致使用HTML5、Phonegap和Android进行选择_Android_Html_Cordova_Easeljs

画布上的鼠标点击（或触摸）事件导致使用HTML5、Phonegap和Android进行选择

android html cordova

画布上的鼠标点击（或触摸）事件导致使用HTML5、Phonegap和Android进行选择,android,html,cordova,easeljs,Android,Html,Cordova,Easeljs,我正在使用easlejs+phonegap开发一款HTML5游戏，遇到了一个问题，每次你在画布上单击/触摸/鼠标向下时，屏幕都会闪烁下面是我创建的非常简单的代码，用于测试这个问题，并查看它是否与easlejs相关。从代码中可以看出，它与easlejs无关，只是一个html5/phonegap问题你可以看到，我也尝试了无选择CSS样式，但没有运气 <!doctype html> <html> <head> <title></titl

我正在使用easlejs+phonegap开发一款HTML5游戏，遇到了一个问题，每次你在画布上单击/触摸/鼠标向下时，屏幕都会闪烁

下面是我创建的非常简单的代码，用于测试这个问题，并查看它是否与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>


#帆布
{
用户选择：无；
-webkit用户选择：无；
-moz用户选择：无；
}
var canvas=document.getElementById（“canvas”）；
canvas.addEventListener（“鼠标向下”，函数（e）
{
var ctx=canvas.getContext（“2d”）；
var x=数学.random（）*320；
var y=Math.random（）*480；
var w=数学随机（）*100；
var h=数学.random（）*100；
ctx.fillStyle=“#FF0000”；
ctx.fillRect（x，y，w，h）；
}，假）；

编辑：原来EaselJS仍然有一个bug，触摸显示了一个选择。为了解决这个问题，我在阅读本文后向画布添加了一个CSS属性：

解决办法是：

-webkit点击突出显示颜色：透明

在本文的帮助下，我们能够解决此问题：

这是工作代码。修复方法是处理touchstart/end事件以处理点击。不再经历橙色选择阶段
在2.2 emulator和我的设备（运行Cyanogenmod IC的三星Captivate）中测试了这一点

var canvas=document.getElementById（“canvas”）；
//修复：取消触摸结束事件并通过touchstart处理单击
addEventListener（“touchend”，函数（e）{e.preventDefault（）；}，false）；
canvas.addEventListener（“touchstart”，函数（e）
{
var ctx=canvas.getContext（“2d”）；
var x=数学.random（）*320；
var y=Math.random（）*480；
var w=数学随机（）*100；
var h=数学.random（）*100；
ctx.fillStyle=“#FF0000”；
ctx.fillRect（x，y，w，h）；
//修复：取消事件
e、 预防默认值（）；
}，假）；
-webkit点击高亮显示颜色：rgba（0,0,0,0）；/*进行透明链接选择，将最后一个值“不透明度”0调整为1.0*/
请参阅：maybe:document.addEventListener（“selectstart”，function（）{return false；}）；dragstart事件也是如此……不幸的是，这没有帮助。甚至尝试在画布上添加事件。谢谢！我只需要CSS部分，但我无法相信，当我每次触摸移动站点上的活动按钮时，要找到有同样问题的人是多么困难。这非常分散我的注意力，对我的访客没有视觉上的帮助，因为我给他们提供了足够的即时的视觉反馈，没有“闪烁”。。。
<!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>