Ben's Hobbyhoekje -- Programmeren voor aanraakschermen

Programmeren voor aanraakschermen

Aanraakschermen zijn in. In plaats van iets aan te wijzen met de muis-aanwijzer gebruik je je vingertoppen. In plaats van een muisklik tik je op het scherm.
Met de opkomst van tablets en smartphones heeft het werken met aanraakschermen een enorme vlucht genomen. Het is dan ook logisch te veronderstellen dat er speciale events zijn gemaakt voor het werken met aanraakschermen.

Aan het HTML Document Object Model is het object TouchEvent toegevoegd, dat speciaal is bedoeld voor het werken met aanraakschermen. De bijbehorende events zijn:

Event		Beschrijving
touchstart		Dit treedt op als de vinger het scherm begint aan te raken.
touchmove		Dit treedt op als er wordt geveegd over het scherm.
touchend		Dit treedt op als de vinger van het scherm wordt gehaald.
touchenter		Dit treedt op als de vinger boven een 'aanraakbaar' element komt. Dit event bubbelt niet.
touchleave		Dit treedt op als de vinger een 'aanraakbaar' element verlaat. Dit event bubbelt niet.
touchcancel		Dit treedt op als een aanraking wordt onderbroken, bijvoorbeeld als het aanraakpunt buiten het browserwindow komt, of als er een alert verschijnt.

Geen van bovenstaande events wordt ondersteund door de desktop-versies van de grote browsers.
Daarbij is er nog een aantal properties in de HTML DOM opgenomen, eveneens niet ondersteund door de desktop-versies van de grote browsers:

Property		Beschrijving
touches		Dit is een array met Touch-objecten, met één element voor elke vinger die het scherm aanraakt.
changedTouches		Dit is een array met Touch-objecten, met ée´n element voor elke vinger die het huidige doel-element aanraakt. Elk element bevat de wijzigingen in touches sinds de laatste aanraking.
targetTouches		Dit is een array met Touch-objecten, met één element voor elke vinger die het huidige doel-element aanraakt en ook in het doel-element is begonnen.
		N.B.: Als je het aantal elementen in deze arrays wilt weten, gebruik je –net als bij elke array– de eigenschap length.
type		De soort event die het Event-object activeerde, bijvoorbeeld. touchstart, touchmove, enz.
target		Het doel-element van de aanraking.
altkey		Boolean (dus true of false), geeft aan of de Alt-toets was ingedrukt tijdens de aanraking.
ctrlkey		Boolean, geeft aan of de Control-toets was ingedrukt tijdens de aanraking.
metakey		Boolean, geeft aan of de Meta-toets was ingedrukt tijdens de aanraking. De Meta-toets is op oudere toetsenborden niet aanwezig. Op MAC-computers is het de Command/Cmd-toets (⌘). Op Windows-computers is het de Windows-toets (⊞). In de praktijk zal metaKey vrijwel altijd false zijn.
shiftkey		Boolean, geeft aan of de Shift-toets was ingedrukt tijdens de aanraking.

Het Touchobject, dat via de arrays touches, changedTouches en targetTouches toegankelijk is, is een serie eigenschappen beschikbaar die uiteindelijk het programmeren voor aanraakschermen mogelijk maken:

Property		Beschrijving
identifier		Unieke wijzer naar een aanraakpunt. Het aanraakpunt van de eerste vinger is 0, het aanraakpunt van de tweede vinger is 1, de derde vinger heeft 2, enz. Deze nummering verandert zodra een of meerdere vingers het scherm loslaten.
screenX		De X-coördinaat van het aanraakpunt, gerekend van de linkerrand van het beeldscherm.
screenY		De Y-coördinaat van het aanraakpunt, gerekend van de bovenrand van het beeldscherm.
clientX		De X-coördinaat van het aanraakpunt, gerekend van de linkerrand van de viewport (meestal het browserwindow), exclusief offset door scrollen.
clientY		De Y-coördinaat van het aanraakpunt, gerekend van de bovenrand van de viewport (meestal het browserwindow), exclusief offset door scrollen.
pageX		De X-coördinaat van het aanraakpunt, gerekend van de linkerrand van de viewport (meestal het browserwindow), inclusief offset door scrollen.
pageY		De Y-coördinaat van het aanraakpunt, gerekend van de bovenrand van de viewport (meestal het browserwindow), exclusief offset door scrollen.
radiusX		De straal van de ellips die de vorm van het aanraakpunt het beste beschrijft, in X-richting (horizontaal).
radiusY		De straal van de ellips die de vorm van het aanraakpunt het beste beschrijft, in Y-richting (verticaal).
rotationAngle		De hoek (in graden )die het aanraakpunt (de ellips) is verdraaid, in de richting van de wijzers van de klok.
force		Dit is een indicator voor de kracht waarmee op het scherm wordt gedrukt,een getal tussen 0.0 (geen druk) en 1.0 (Hoogste druk die het scherm aan kan). Dit wordt alleen ondersteund door speciale hardware. Bij "gewone" aanraakschermen staat deze waarde altijd op nul.
target		Het doel-element van het aanraakpunt, dat wil zeggen: Het element waar de aanraking voor bedoeld was.

Het object TouchEvent is alleen beschikbaar als er daadwerkelijk een aanraakscherm is. Twee objecten die gerelateerd zijn aan TouchEvent, te weten KeyboardEvent en MouseEvent zijn wel altijd beschikbaar om te kunnen reageren op een fysiek of softwarematig toetsenbord en een muis of touchpad.

Veel van de zaken die je doet op een aanraakscherm (vegen, tikken, enz.) worden ook opgepakt door andere event-handlers. Zo wordt een tik op het scherm behandeld als een muisklik. Een veegbeweging wordt behandeld als scrollen. Voor het verslepen van bijvoorbeeld een afbeelding binnen een viewport (dragging) is geen event beschikbaar.
Als je je vinger op een element stilhoudt wordt dat behandeld als een mouseover; op mouseout wordt echter niet gereageerd.

Vegen en tikken worden behandeld als muis-event, tenzij je een eventhandler voor aanraken hebt gemaakt. Andersom is dat niet zo! Als je alleen voor een aanraakscherm hebt geprogrammeerd, werken de muis en het toetsenbord gedeeltelijk niet.

Net zoals bij het verslepen van een element met de muis moet je dat voor een aanraakscherm zelf programmeren. Zie onder andere het item Programmeren voor aanraakschermen: Veegbewegingen.

Tenslotte:
Zoals eerder opgemerkt wordt het Touch-event niet ondersteund in de desktop-versies van de grote browsers. Er is een voorzichtige trend gaande om ook laptops en zelfs desktop-computers te voorzien van een aanraakscherm. Hoe dit gaat uitpakken voor de hier beschreven techniek is mij nog niet duidelijk.

Omdat veel acties op een aanraakscherm als een muis-event worden behandeld, is het niet altijd nodig om elk aanraak-event apart in je site in te programmeren.

Als je wilt detecteren of het beeldscherm een aanraakscherm is of niet, kun je de methode toepassen die wordt beschreven in het item Aanraakscherm detecteren.