13

我正在使用 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>
4

2 回答 2

18

编辑：原来 EaselJS 仍然存在触摸显示选择的错误。为了解决这个问题，我在阅读本文后向画布添加了一个 CSS 属性：https ://stackoverflow.com/a/7981302/66044

解决方法是： -webkit-tap-highlight-color: transparent;

能够在这篇文章的帮助下解决这个问题： Prevent page scroll on drag in IOS and Android

这是工作代码。修复是处理 touchstart/end 事件以处理点击。不再体验橙色选择阶段。

在 2.2 模拟器和我的设备中测试了这个（运行 Cyanogenmod ICS 的三星 Captivate）

<!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-03T13:36:28.627 回答
3

-webkit-tap-highlight-color: rgba(0,0,0,0); /* 进行透明链接选择，调整最后一个值 opacity 0 到 1.0 */

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

于 2013-02-09T01:52:33.220 回答