Comment éviter les événements de clic sur le corps du document (peut-être un bug en Cordova?)

Je suis un débutant essayant de développer un jeu de téléphone portable avec Kinetic Js et "phonegap build". J'éprouve un problème que je ne connais pas comment résoudre. J'ai fait quelques tests:

  1. J'ai juste collé ce code ici dans mon index.html et envoyé le code à la compilation phonegap qui a créé le fichier apk à partir du code html. L'application fonctionne très bien, mais si vous jouez un peu, vous pouvez voir un comportement indésirable: l'ensemble de la "scène" peut être cliqué avec un contact et quand cela se produit (il n'est pas facile de le faire à dessein, mais cela arrive) vous Entendez le son de clic standard du système d'exploitation Android et vous voyez la zone entière en surbrillance pour une seconde. Tout comme si vous étiez dans un navigateur et vous avez cliqué sur un lien.

  2. J'ai compilé (avec la compilation phonegap) le simulateur de boussole lié ici , il fonctionne mais lorsque vous appuyez sur la photo de la boussole, vous déclenchez le clic. C'est un effet indésirable qui n'est pas présent si vous l'exécutez sur un navigateur / émulateur.

  3. Je viens de mettre de l'image png dans le corps en évitant les canvas et KineticJs. Je n'ai pas ajouté de script. Dans ce cas, il n'y a pas d'événement de clic lorsque vous appuyez sur. Mais si j'ajoute

    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 

    (Même sans ajouter de script), appuyez à nouveau pour pouvoir produire l'événement de clic. Si je supprime l'une des deux lignes, l'événement de clic disparaît. Aussi, si j'ajoute

     <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script> 

    De nouveau, le corps est cliquable en produisant des reflets et en faisant un clic sur le son. (Je parle toujours de l'application compilée avec la compilation phonegap).

J'ai essayé de remplacer <body> par <body onmousedown="return false;"> mais n'a pas aidé. J'ai également essayé avec $("#object").click( function () {return false;}) avec l'élément div du canevas, de la photo et du corps, n'a pas non plus aidé. J'ai cherché des conseils pour que les ancres ne soient pas cliquables pour voir si elles pouvaient être appliquées mais je ne trouvais rien d'utile.

Toute suggestion?

Mise à jour: Un autre essai qui n'a pas résolu est: stage.off('tap click mousedown touchstart touchend dbltap'); .

Avez-vous essayé cela?

 stage.on('tap touchstart touchend', function() { return false; }); 

Cela pourrait aussi vous aider:

 canvas { /*-webkit-tap-highlight-color: transparent; Some users reported this worked for them, although rgba(0,0,0,0); worked for the asker*/ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: none; } 

Voici un lien rapide sur webkit-touch-callout, je ne sais pas si cela aidera votre situation … http://phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout. Html

EDIT: Il semble que l'auteur de l'écart de téléphone suggère -webkit-tap-highlight-color: rgba(0, 0, 0, 0); Pour empêcher la sélection de lien. Source ici: https://github.com/phonegap/phonegap-start/blob/master/www/css/index.css

Pour désactiver le clic sur l'étiquette d'ancrage, vous pouvez simplement utiliser des astuces de css, par exemple, vous avez une étiquette d'ancrage avec la classe 'notclickable', puis ajoutez css,

 .notclickable { pointer-events: none; cursor: default; opacity:0.7; } 

Maintenant, vous pouvez effacer une marque d'ancrage en ajoutant cette classe

Ou vous pouvez essayer ceci pour empêcher un clic,

 $('.notclickable').live('click', function(event){ event.preventDefault(); }); 

J'espère que cela t'aides.