Les clics sur la souris (ou le toucher) sur la toile entraînent une sélection en utilisant HTML5, Phonegap et Android

Je suis en train de travailler sur un HTML5 jeu à l'aide de easlejs + phonegap et suis en cours d'exécution dans un problème lorsque l'écran clignote à chaque fois que vous cliquez sur/touch/mousedown sur la toile.

Ci-dessous est très simple code que j'ai créé pour tester le problème et voir si elle était liée à easlejs. Comme vous pouvez le voir dans le code, il n'a rien à voir avec easlejs et est juste un html5/phonegap question.

Vous pouvez le voir j'ai aussi essayé le pas de sélectionner des styles CSS à pas de chance.

Les clics sur la souris (ou le toucher) sur la toile entraînent une sélection en utilisant HTML5, Phonegap et Android

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

source d'informationauteur Gautam

  1. 18

    Edit: s'est avéré EaselJS encore eu le bug où le contact a montré une sélection. À résolu ce problème, j'ai ajouté une propriété CSS pour la toile après la lecture de cet article: https://stackoverflow.com/a/7981302/66044

    Le correctif a été:
    -webkit-tap-highlight-color: transparent;

    A été en mesure de résoudre avec l'aide de cet article:
    Empêcher le défilement des pages sur un glisser sous IOS et Android

    Voici le code de travail. La solution est dans le traitement des évènements touchstart/événements de la fin de la poignée de clics. Plus l'expérience de l'orange de l'étape de sélection.

    Testé ce dans les deux 2,2 émulateur et mon appareil (Samsung Captivate l'exécution de 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>
  2. 3

    -webkit-tap-highlight-color: rgba(0,0,0,0); /* faire de lien transparent de sélection, ajuster la dernière valeur d'opacité de 0 à 1.0 */

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