Google's "FastButton" -- try this.
Based on that I did some testing and on my iphone/ipad indeed button pushing is almost instantaneous -- noticably faster than using a jquery mobile 1.0a3 button. I realize that I am not skilled enough to figure out how to incorporate it into jQuery mobile, but I figured Id share the code I used for testing in case someone might want to try it out. Try tapping the button about 20 times really fast and it will be apparent.
- <html>
<head>
<meta name = "viewport" content = "initial-scale=1.0, user-scalable=no" />
<script type="text/javascript">
function FastButton(element, handler) {
this.element = element;
this.handler = handler;
element.addEventListener('touchstart', this, false);
};
FastButton.prototype.handleEvent = function(event) {
switch (event.type) {
case 'touchstart': this.onTouchStart(event); break;
case 'touchmove': this.onTouchMove(event); break;
case 'touchend': this.onClick(event); break;
case 'click': this.onClick(event); break;
}
};
FastButton.prototype.onTouchStart = function(event) {
event.stopPropagation();
this.element.addEventListener('touchend', this, false);
document.body.addEventListener('touchmove', this, false);
this.startX = event.touches[0].clientX;
this.startY = event.touches[0].clientY;
this.element.style.backgroundColor = "rgba(0,0,0,.7)";
};
FastButton.prototype.onTouchMove = function(event) {
if(Math.abs(event.touches[0].clientX - this.startX) > 10 || Math.abs(event.touches[0].clientY - this.startY) > 10) {
this.reset();
}
};
FastButton.prototype.onClick = function(event) {
event.stopPropagation();
this.reset();
this.handler(event);
if(event.type == 'touchend') {
preventGhostClick(this.startX, this.startY);
}
this.element.style.backgroundColor = "";
};
FastButton.prototype.reset = function() {
this.element.removeEventListener('touchend', this, false);
document.body.removeEventListener('touchmove', this, false);
this.element.style.backgroundColor = "";
};
function preventGhostClick(x, y) {
coordinates.push(x, y);
window.setTimeout(gpop, 2500);
};
function gpop() {
coordinates.splice(0, 2);
};
function gonClick(event) {
for(var i = 0; i < coordinates.length; i += 2) {
var x = coordinates[i];
var y = coordinates[i + 1];
if(Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) {
event.stopPropagation();
event.preventDefault();
}
}
};
document.addEventListener('click', gonClick, true);
var coordinates = [];
function initFastButtons() {
new FastButton(document.getElementById("btn0"), goSomewhere);
};
function goSomewhere() {
document.getElementById("clicklog").innerHTML = document.getElementById("clicklog").innerHTML + " Tap. ";
};
</script>
</head>
<body onload="initFastButtons();">
<div id="clicklog" style="width:200px;height:200px;">
</div>
<button id="btn0" style="width:100px;height:50px;">Button</button>
</body>
</html>