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

Changing order in viewholder
Bonjour(IPP) vs Jetdirect-Socket Printer
Convert MANUFACTURER plus MODEL into Phone Name
BroadcastReceiver does not trigger
Intent ACTION_CALL is not being intercepted by my application
Button “MyButton” is never used
Dynamically adding to listView in a fragment from mainActivity
Data does not reload automatically in a Fragment inside ViewPager
how to show dialog from my application for result (like google play game)
error in android studio log cat need help..open gl FBO not found
Android - Run/debug background service [duplicate]
Can findViewById(android.R.id.content) ever return null for Snackbars?
How to delete shadow of ball in opencv android
Swedish letters missing in google-vision Api response
Firebase Android Response code: 400
Set flags to interact with system overlay window?

Categories

HOME
adal
spark-streaming
eslint
jmeter
apache-jena
rendering
switch-statement
mapbox
nuget-package
trac
accessibility
p2p
pattern-matching
filechannel
naivebayes
flash-player
heat
parameter-passing
package.json
charles
microsoft-ocr
visual-glitch
inno-download-plugin
nstimer
carrierwave
twiml
mockjax
cognos-bi
simplecv
android-maps-extensions
sql-delete
getlasterror
sharepoint-workflow
playframework-2.1
connection-pool
visa
apache-directory
rfc3339
yii2-api
configurationmanager
rserve
convex-optimization
amq
dt
cup
django-1.10
sandcastle
pocketsphinx-android
cronexpression
pure-css
actor-platform
envi
tooleap
appscale
contentcontrol
decimalformat
android-launcher
phpldapadmin
webmatrix-3
android-vibration
deform
easyrtc
iso-prolog
mdichild
qscrollarea
sbcl
android-usb
bin
merb
android-icons
wp7test
virtual-pc
redis-py
rmiregistry
agility.js
winmain
pylucene
svk
metaweblog
objective-j
timertask
jqueryform
murmurhash
dojo-dnd
scrubyt
sqlobject

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