Как ускорить реакцию на нажатие ссылок в WebView под Android?

Question

[vdstudio]

Возникла необходимость написать клиентское ПО под Android. В силу плохого владения Java решил написать программу-оболочку над WebView, а всю логику вынести на загружаемые страницы в Javascript + PHP на сервере. Такой вариант меня более чем устраивает.


Но возникла небольшая проблема: страница содержит массу кнопок (реализованы в виде ссылок с CSS-настройками. Сразу оговорюсь, что вариант с обычными кнопками <input type="button" ... /> проблему не решает — результат тот же). Так вот при нажатии этих кнопок WebView ждет где-то с треть секунды, потом звуковой сигнал, потом рисует оранжевую рамку вокруг кнопки, потом ее убирает. На всю эту канитель уходит с полсекунды и если пользователь пытается быстро нажимать кнопки — некоторые нажатия пропускаются.


Как заставить WebView быстрее реагировать на нажатия?

В CSS задано:

a, a:hover, input, textarea {<br/>
 -webkit-tap-highlight-color: rgba(0,0,0,0);<br/>
 -webkit-touch-callout: none;<br/>
 -webkit-user-select: none;<br/>
}<br/>

но это только делает рамку не оранжевой, а прозрачной, но время на ее прорисовку все равно тратится!

Answer 1

[vdstudio]

Огромное спасибо!
Правда, я не использовал приведенный там код двум причинам:
1) этот код не решает проблему с фантомными кликами (на одно событие происходит два клика)
1) у меня за основу взят jQuery и мне не хотелось бороться с совместимостью.
Но, потянув за ниточку в одном из комментариев, нашел плагин к jQuery, который замечательно работает (по-крайней мере на моем ViewSonic под Android 2.2)
Может, кому еще пригодится:

/**
* jQuery.fastClick.js
*
* Work around the 300ms delay for the click event in some mobile browsers.
*
* Code based on <code.google.com/mobile/articles/fast_buttons.html>
*
* @usage
* $('button').fastClick(function() {alert('clicked!');});
*
* @license Under Creative Commons Attribution 3.0 License
* @author Dave Hulbert (dave1010)
* @version 0.2 2011-09-20
*/

/*global document, window, jQuery, Math */

(function($) {

$.fn.fastClick = function(handler) {
return $(this).each(function(){
$.FastButton($(this)[0], handler);
});
};

$.FastButton = function(element, handler) {
var startX, startY;

var reset = function() {
$(element).unbind('touchend');
$(document.fastButton).unbind('touchmove');
};

var onClick = function(event) {
event.stopPropagation();
reset();
handler.call(this, event);

if (event.type === 'touchend') {
$.clickbuster.preventGhostClick(startX, startY);
}
};

var onTouchMove = function(event) {
if (Math.abs(event.originalEvent.touches[0].clientX - startX) > 10 ||
Math.abs(event.originalEvent.touches[0].clientY - startY) > 10) {
reset();
}
};

var onTouchStart = function(event) {
event.stopPropagation();

$(element).bind('touchend', onClick);
$(document.fastButton).bind('touchmove', onTouchMove);

startX = event.originalEvent.touches[0].clientX;
startY = event.originalEvent.touches[0].clientY;
};

$(element).bind({
touchstart: onTouchStart,
click: onClick
});
};

$.clickbuster = {
coordinates: [],

preventGhostClick: function(x, y) {
$.clickbuster.coordinates.push(x, y);
window.setTimeout($.clickbuster.pop, 2500);
},

pop: function() {
$.clickbuster.coordinates.splice(0, 2);
},

onClick: function(event) {
var x, y, i;
for (i = 0; i < $.clickbuster.coordinates.length; i += 2) {
x = $.clickbuster.coordinates[i];
y = $.clickbuster.coordinates[i + 1];
if (Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) {
event.stopPropagation();
event.preventDefault();
}
}
}
};

$(function(){
document.addEventListener('click', $.clickbuster.onClick, true);
});

}(jQuery));


Answer 2

[YoungSkipper]

Проверте вот это решение — cubiq.org/remove-onclick-delay-on-webkit-for-iphone
Поделитесь, если протестируете на android