Daar sta je dan, … hoe click ik op een tablet?

Onlangs stelde ik mij deze vraag bij het maken van een webapplicatie dat op een gewone desktop browser (ja, zo ver zijn we al, desktop browser is al iets ‘gewoon’) en op de Ipad moest functioneren.

Ahja, je werkt met je vingers op een Ipad

Na enig onderzoek wees zich uit dat de events click – mousemove – focus eenvoudig konden worden ‘vertaald’ naar voor Ipad vriendelijke verstaanbare events, met behulp van JavaScript.

Hoe doen we dat nu?

Eerst moeten we detecteren of we al dan niet op een Ipad zijn:

var isiPad = navigator.userAgent.match(/iPad/i) !== null;

De variable isiPad is een boolean, met als resultaat true of false (waar / niet waar)

Daarna kunnen we voor elk event een variable aanmaken die het juiste event zet:

Voor ‘click’ event

var clickEvent = (isiPad) ? 'touchstart' : 'click';

Voor ‘mousemove’ event

var scrollEvent = (isiPad) ? 'touchmove' : 'mousemove';

Voor ‘focus’ event

var focusEvent = (isiPad) ? 'touchstart focus' : 'focus';

Dit geeft ons nu de volgende eenvoudige jQuery werkwijze voor bijvoorbeeld ‘click’:

$('selector a').clickEvent(function(e) {
e.preventDefault();
//doe stuff hier...
});

Hopelijk heb je er iets aan!