Мышь (или касание) события на холсте вызывает выбор с помощью HTML5, Phonegap и Android

Я работаю над игрой HTML5, используя easlejs + phonegap, и я сталкиваюсь с проблемой, когда экран мигает каждый раз, когда вы нажимаете/касаетесь/mousedown на холсте.

Ниже приведен самый простой код, который я создал для проверки проблемы и выяснения, связано ли это с easlejs. Как вы можете видеть из кода, это не имеет ничего общего с easlejs и является просто проблемой html5/phonegap.

Вы можете видеть, что я также не пытался выбирать стили CSS без везения.

screenshots showing the orange border when holding mouse down on the canvas (1st image) and then releaseing it (2nd image)

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

Ответы

Ответ 1

Edit: Turned. У EaselJS все еще была ошибка, в которой сенсорный экран показывал выбор. Чтобы решить эту проблему, я добавил свойство CSS на холст после прочтения этой статьи: fooobar.com/questions/403185/...

Исправлено: -webkit-tap-highlight-color: transparent;

Удалось решить эту проблему с помощью этой статьи: Запретить прокрутку страницы при перетаскивании в IOS и Android

Здесь рабочий код. Исправление заключается в обработке событий touchstart/end для обработки кликов. Больше не испытывайте оранжевую сцену выбора.

Протестировано это как в эмуляторе 2.2, так и в моем устройстве (Samsung 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>