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

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

Ниже приведен очень простой код, который я создал, чтобы проверить проблему и посмотреть, связана ли она с 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>

android cordova html easeljs
person Gautam    schedule 03.06.2012    source источник
comment
возможно: document.addEventListener (selectstart, function () {return false; }); и то же самое для события драгстарта...   -  person Zevan    schedule 03.06.2012
comment
К сожалению, это не помогло. Даже пытался добавить событие на холст.   -  person Gautam    schedule 03.06.2012

Ответы (2)


arrow_upward
18
arrow_downward

Изменить: оказалось, что в EaselJS все еще была ошибка, когда касание показывало выбор. Чтобы решить эту проблему, я добавил свойство CSS на холст после прочтения этой статьи: https://stackoverflow.com/a/7981302/66044< /а>

Исправлено: -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>
person Gautam    schedule 03.06.2012
comment
Спасибо! Мне нужна была только часть CSS, но я не могу поверить, как трудно было найти кого-то еще, у кого была бы такая же проблема с мерцанием каждый раз, когда я касался активной кнопки на своем мобильном сайте. Это очень отвлекало и визуально не помогало моим посетителям, поскольку я предоставляю им достаточно немедленную визуальную обратную связь без мерцания... - person exoboy; 14.08.2012

arrow_upward
3
arrow_downward

-webkit-tap-highlight-color: rgba (0,0,0,0); /* делаем прозрачный выбор ссылки, устанавливаем непрозрачность последнего значения от 0 до 1.0 */

см.: https://github.com/phonegap/phonegap-start/blob/master/www/css/index.css

person Henry    schedule 09.02.2013