android


Is there a way to remove the clicking lag on mobile touch devices?


When viewing a web site on a mobile device (iPad, Galaxy Tab) there's always a lag when I click an element (regular link or anything else that is made clickable using javascript/jquery).
While reading online, I found out that the browser is using touchstart followed by touchend events, and afterwards it triggers the regular click event. Is there a way to have a more responsive tap and remove the click event that is delayed? Maybe by using javascript, or something else?
if you are writing a web page your self you can register a listener for touchstart and touchend and trigger the onclick code directly from on touch end without any delay.
If you don`t handle the event in touch move the browser will dispatch (with some lag) a click event to the element
Take a look at this description from google to create "fast buttons": http://code.google.com/intl/de-DE/mobile/articles/fast_buttons.html
Adapted from Matt's library (http://stackoverflow.com/a/9370637/1491212) itself adapted from google code, I wrote a jQuery plugin.
Use like this : $('mySelector').fastClick(handler);
(function($){
var clickbuster = {
preventGhostClick: function(x, y) {
clickbuster.coordinates.push(x, y);
window.setTimeout(clickbuster.pop, 2500);
},
pop: function() {
clickbuster.coordinates.splice(0, 2);
},
onClick: function(event) {
for (var i = 0; i < clickbuster.coordinates.length; i += 2) {
var x = clickbuster.coordinates[i];
var y = clickbuster.coordinates[i + 1];
if (Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) {
event.stopPropagation();
event.preventDefault();
}
}
}
};
var methods = {
init: function(handler){
return this.each(function() {
var $this = $(this),
data = $this.data('fastClick');
if(!data){
this.addEventListener('touchstart', methods.handleEvent, false);
this.addEventListener('click', methods.handleEvent, false);
$this.data('fastClick', {
target: $this,
handler: handler
});
}
});
},
handleEvent:function(event) {
switch (event.type) {
case 'touchstart': $(this).fastClick('onTouchStart',event); break;
case 'touchmove': $(this).fastClick('onTouchMove',event); break;
case 'touchend': $(this).fastClick('onClick',event); break;
case 'click': $(this).fastClick('onClick',event); break;
}
},
onTouchStart: function(event) {
event.stopPropagation();
this[0].addEventListener('touchend', methods.handleEvent, false);
var _this = this;
document.body.addEventListener('touchmove', function(event){
methods.handleEvent.apply(_this,[event]);
}, false);
$(this).data('fastClick').startX = event.touches[0].clientX;
$(this).data('fastClick').startY = event.touches[0].clientY;
},
onTouchMove: function(event) {
if (Math.abs(event.touches[0].clientX - this.data('fastClick').startX) > 10 ||
Math.abs(event.touches[0].clientY - this.data('fastClick').startY) > 10) {
this.fastClick('reset');
}
},
onClick: function(event) {
event.stopPropagation();
$(this).fastClick('reset');
$(this).data('fastClick').handler.call(this,event);
if (event.type == 'touchend') {
clickbuster.preventGhostClick($(this).data('fastClick').startX, $(this).data('fastClick').startY);
}
},
reset: function() {
this[0].removeEventListener('touchend', methods.handleEvent, false);
document.body.removeEventListener('touchmove', methods.handleEvent, false);
}
}
$.fn.fastClick = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if ( typeof method === 'object' || typeof method === 'function' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.hScroll');
}
}
clickbuster.coordinates = [];
document.addEventListener('click', clickbuster.onClick, true);
})(jQuery);
I use detection if the device support touch like modernizer. i fill a var called touchClick with the options 'click' or 'touchend' bases on the outcome if it is a touch device or not. In jquery I simply call:
$('element').on(touchClick, function(e){ //do something });
It has a very small footprint.

Related Links

How to set the row height of listview to fit the image size
Multiple ForeignCollection of same type in ORMLite
Unable to find explicit activity class that isn't a class
Is this a Digital Compass or Unity limitation?
Launch a child activity in a loop returning to parent activity after each to get settings
Camera preview is distorted
How to change the tabIndicator's text color?
android : Open pop-up window in my webview
Populate Custom Calendar with json data
Simple do-while loop causes crash
Deleting sms gives exception
Unable to implement custom keyboard using Android Fragment - Null Pointer Exception
Android send HTML mail through Exchange
Android fragment navigation, circular path
AutoCompleteTextView on selection gives StringIndexOutOfBoundsException
Error in R.java class

Categories

HOME
codenvy
github-for-windows
youtube-data-api-v3
mstest
simulink
gembox-spreadsheet
jetty
python-multithreading
banner
categorical-data
project-intu
stellar.js
supervisor
nancy
symbol
keytool
asp.net-mvc-viewmodel
digital-signature
enterprise-miner
topology
simpleitk
drive
cgbitmapcontext
systemtime
parcelable
zxing
short-url
jquery-callback
dynamically-generated
slidetoggle
angularjs-components
angular-translate
spotipy
uitapgesturerecognizer
winpe
google-earth
ntp
calculation
constexpr
corenlp-server
aws-codecommit
mustache
hard-drive
raft
reason
docfx
sql-server-ce
release
verifiable-c
loading
diacritics
lpsolve
ssrs-2014
http-request
tcc
contract
oim
jboss-4.2.x
mschart
identification
tf
pdf-conversion
payload
rackspace-cloud
django-1.10
android-instrumentation
simplepie
redistributable
seek
envi
flex4.6
refinerycms
dbamp
phpgrid
maybe
concurrentmodification
viola-jones
airbrake
avahi
android-broadcast
phpldapadmin
showdialog
execve
primitive-types
paw
matrix-inverse
memset
vsx
extjs2
dsym
clickbank
spring-3
sphinxql
ice-cube
oocss
nevron
workitem
time.h
pclzip
virtual-pc
idn
joomla3.1
qi4j
pstack
veracity
thttpd
fusefabric
usertype
landscape-portrait
clrstoredprocedure
collectionviewsource
timertask
globals
aspmenu
ajax-polling
qtabbar
spread
sun
cldc
movieplayer

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App