鼠标在画布上单击（或触摸）事件会导致使用HTML5，Phonegap和Android进行选择

Question

我正在使用easlejs + phonegap处理HTML5游戏，并且遇到了每次在画布上单击/触摸/ mousedown时屏幕闪烁的问题。

下面是我为测试问题而创建的非常简单的代码，看它是否与easlejs相关。 从代码中可以看出，它与easlejs无关，只是一个html5 / phonegap问题。

你可以看到我也尝试了没有选择的CSS样式，没有运气。

在画布上按住鼠标（第1张图像）然后释放它（第2张图像）时显示橙色边框的屏幕截图

<!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>

Answer 1

编辑：结果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>

Answer 2

-webkit-tap-highlight-color：rgba（0,0,0,0）; / *进行透明链接选择，调整最后一个值不透明度0到1.0 * /

请参阅： https ： //github.com/phonegap/phonegap-start/blob/master/www/css/index.css

鼠标在画布上单击（或触摸）事件会导致使用HTML5，Phonegap和Android进行选择

问题描述

2 个解决方案

解决方案1
18 已采纳 2012-06-03 13:36:28

解决方案2
3 2013-02-09 01:52:33

鼠标在画布上单击（或触摸）事件会导致使用HTML5，Phonegap和Android进行选择

问题描述

2 个解决方案

解决方案1 18 已采纳 2012-06-03 13:36:28

解决方案2 3 2013-02-09 01:52:33

解决方案1
18 已采纳 2012-06-03 13:36:28

解决方案2
3 2013-02-09 01:52:33