Android WebView: réponse au bouton très lâche

J'ai une petite application Web que j'ai faite pour jouer avec la fonctionnalité WebView d'Android.

J'ai des divs que j'utilise comme boutons (avec des attributs onclick ). En essayant l'application (dans le navigateur de l'appareil), j'ai immédiatement remarqué un grand décalage après avoir appuyé sur un bouton. Le décalage intervient lorsque je touche le bouton et lorsque le navigateur affiche la mise en surbrillance orange autour d'elle.

J'ai testé et obtenu des informations:

JavaScript n'est pas le problème. J'ai débloqué tous mes scripts et j'ai effacé tous les attributs onclick . La performance n'a pas changé.
CSS3 n'est pas le problème. Je me suis débarrassé de tous les gradients de fantaisie, et la performance n'a pas changé.
Le nombre d'éléments n'est pas le problème. Je l'ai essayé avec seulement quelques éléments sur la page, et les performances n'ont pas changé.
Doctype et meta stuff ne sont pas le problème. Je me suis assuré que j'utilise ce que Android recommande .

Je ne doute vraiment pas pourquoi il y a tellement de retard. J'ai éliminé tout ce qui pourrait l'être, mais rien ne l'a aidé.

Est-ce que je manque quelque chose?

Comment puis-je supprimer le décalage après avoir appuyé sur un bouton?

Fondamentalement, les événements sur les navigateurs mobiles sont retardés de 300ms. Connaissez-vous le motif du bouton rapide? Fondamentalement, vous pouvez utiliser l'événement touchstart (qui déclenche sans délai).

Voici une explication complète: http://code.google.com/mobile/articles/fast_buttons.html

Donc, WebView détient chaque événement de prise pour voir s'il s'agit d'une double touche ou d'un événement de déplacement tactile. Il existe une alternative à la liaison aux événements touchstart. Si vous spécifiez avec la méta-directive viewport que votre WebView ne doit pas zoomer ou faire défiler, appuyez sur les événements pour atteindre votre code immédiatement (depuis Gingerbread).

Vous pouvez trouver les détails sur la directive viewport ici: http://developer.android.com/guide/webapps/targeting.html

Essayez d'insérer dans le code html

<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, user-scalable=no">

Et un clic rapide cliquez sur cliquer n'est plus un problème (pour moi. 4.2.2 et WebChromeClient)

Comme le code Google est très compliqué, j'ai mis en place mon propre Mootools 1.3+:

 Element.Events.touch = { base: 'touchend', condition: function(e) { return ((new Date().getTime() - this.startT < 200) && this.valid) ? true : false; }, onAdd: function(fn) { this.addEvent('touchstart', function(e) { this.valid = true; this.startT = new Date().getTime(); this.startX = e.touches[0].clientX; this.startY = e.touches[0].clientY; }); this.addEvent('touchmove', function(e) { if ((Math.abs(e.touches[0].clientX - this.startX) > 10) || (Math.abs(e.touches[0].clientY - this.startY) > 10)) this.valid = false; }); } };

Il suffit de mettre ce code sur votre page et maintenant utiliser l'événement tactile au lieu de cliquer :

 $('id').addEvent('touch', function() { // your code });

Cela fonctionne en ajoutant un événement touchend et touchstart, s'ils se produisent en moins de 200 ms et que le contact n'est pas trop loin, c'est une touche valide sinon pas.

Cela a très bien fonctionné sur 2.2 et 4.0