Comments on: Remove onClick delay on webkit for iPhone

By: Pat

Pat — Fri, 20 Aug 2010 16:01:44 +0000

Wow… just realized, if the browser is using the more specific initMouseEvent (to fake/substitute a ‘late’ click event), it is specifying the x and y, but (perhaps) assuming the target will be the same… a completely artificial click with properties carried over from the touchend event.

By: Pat

Pat — Fri, 20 Aug 2010 15:53:00 +0000

Great to have – was beating my head against the wall over this. It appears that safari for iphone/ipad does even worse than suspected: we’ve encountered the kink that if you move the touched element in the window between touchend and click (that 300ms delay), safari fires the event – at the screen coordinate, not on the original target. This means you could clickjack just by swapping elements during that delay window.

By: Alberto

Alberto — Sun, 13 Jun 2010 08:21:36 +0000

Ciao, non so se ti ricordi della mail e della richiesta che ti avevo fatto.
Ho aspettato a richiedertelo via mail perchè immaginavo che avesti aggiornato lo script.
Comunque ti ricordo i due “buchi” che avevo riscontrato (io ho usato e uso il primo script e non il secondo script relativo a come applicarlo ad una precisa classe css):
-lo scroll non funziona, ma l’ho risolto spostato il preventdefault nel touchend.
-Ora c’è il problema che lo scroll funziona ma quando scrolli e passi il dito su dei menu in tali menu si evidenzia l’effetto hover del menu anche se non li vuoi cliccare ma ci passi il dito sopra solo per scrollare.
-Ho un altro problema: il select del forms non funziona, o meglio, togliendo il tuo script funziona, lasciandolo funziona ma soltanto se quando ci clicco tengo premuto per un po’ più di tempo il dito.

Aspetto questo aggiornamento, grazie.

By: Matteo Spinelli

Matteo Spinelli — Mon, 07 Jun 2010 06:15:04 +0000

the “perfect” click I think is:
theEvent.initMouseEvent("click", true, true, e.view, 1, e.changedTouches[0].screenX, e.changedTouches[0].screenY, e.changedTouches[0].clientX, e.changedTouches[0].clientY, e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,0, null)

I think it’s time to update the script

By: Neil

Neil — Mon, 07 Jun 2010 05:15:32 +0000

Using this script has given me fantastic results on a highly interactive site. I have one addition that allows the X and Y coordinates to be passed along (necessary on my site) that you may consider adding.

var theEvent = document.createEvent(‘MouseEvents’);
//theEvent.initEvent(‘click’, true, true);
theEvent.initMouseEvent( ‘click’, true, true, window, 1, e.changedTouches[0].clientX, e.changedTouches[0].clientY, e.changedTouches[0].clientX, e.changedTouches[0].clientY, false, false, true, false, 0, null );

By: Matteo Spinelli

Matteo Spinelli — Wed, 26 May 2010 15:00:22 +0000

The scroller already implements the delay removal, you don’t need to remove the delayed click inside iScroll.

By: themis

themis — Wed, 26 May 2010 14:43:52 +0000

Dear Matteo,
I was very excited when i found your script, but after i used i realized that it breaks scrolling alltogether. Is there something that it can be done for this?

By: iPhone Click Event Delay | The True Tribe

iPhone Click Event Delay | The True Tribe — Fri, 22 Jan 2010 23:34:10 +0000

[...] these cases, the trick is to use ontouchstart instead of onclick. Share and [...]

By: iFUN.de/iPhone :: Alles zum iPhone − Offline, mit Icon und im Vollbild: Tipps für den Entwurf eigener Web-Applikationen

Tue, 29 Dec 2009 16:25:07 +0000

[...] mit Javascript arbeitet – der intelligente Kern fast aller Web-Applikationen – sollte sich die auf cubiq.org abgelegten Ausführungen zum OnTouch-Event durchlesen. Das Javascript-Ereignis kann Verzögerungen bei der Interaktion mit [...]

By: kevin

kevin — Thu, 19 Nov 2009 18:54:09 +0000

Simplified cross-browser version:

Object.prototype.addOnClick = function(func){
	if( window.Touch ){
		this.addEventListener('touchstart', function(e){
			e.preventDefault();
			this.moved = false;
			this.addEventListener('touchmove', function(){
				this.moved = true;
			}, false);
			this.addEventListener('touchend', function(){
				this.removeEventListener('touchmove', this, false);
				this.removeEventListener('touchend', this, false);
				if( !this.moved ) func();
			}, false);

		}, false);
	} else{
		this.onclick = func;
	}
}

Usage: some_element.addOnclick( function(){ alert('hello world'); } );