How to speed up response to link clicks in WebView under Android?

Question

Android

There was a need to write client software for Android. Due to poor knowledge of Java, I decided to write a wrapper program over WebView, and put all the logic on downloadable pages in Javascript + PHP on the server. This option suits me better.
But there was a small problem: the page contains a lot of buttons (implemented as links with CSS settings. I must say right away that the option with regular buttons <input type="button" ... />does not solve the problem - the result is the same). So, when you press these buttons, WebView waits for about a third of a second, then a beep, then draws an orange frame around the button, then removes it. All this rigmarole takes about half a second, and if the user tries to quickly press the buttons, some presses are skipped.
How to make WebView respond faster to clicks?
The CSS is set to:

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

but this only makes the frame not orange, but transparent, but it still takes time to draw it!

Answer 1

Thanks a lot!
True, I did not use the code given there for two reasons:
1) this code does not solve the problem with phantom clicks (two clicks occur on one event)
1) I took jQuery as a basis and I did not want to fight with compatibility.
But, pulling a thread in one of the comments, I found a jQuery plugin that works great (at least on my ViewSonic under Android 2.2)
Maybe someone else will come in handy:
/**
* 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

Check out this solution - cubiq.org/remove-onclick-delay-on-webkit-for-iphone
Share if you test on android