Aanraakscherm detecteren
Elke mobiele telefoon en elk tablet heeft een aanraakscherm, maar heeft ook een toetsenbord. Je kunt er ook een muis
op aan te sluiten; die werkt gewoon, zonder dat je daar software (zoals een driver) voor moet installeren.
Een laptop uit het hogere segment kan zijn uitgerust met een aanraakscherm. Laptops zijn sowieso uitgerust met een toetsenbord
en een apparaat voor het besturen van de muis-pijl. Een desktop-computer kan ook worden uitgerust met een aanraakscherm.
Als je programmeert voor een aanraakscherm, zul je er tegenaan lopen dat de events die specifiek zijn voor aanraakschermen zich anders gedragen dan de overeenkomende events die horen bij de muis en het toetsenbord. Het is kan daarom handig zijn om, ten behoeve van JavaScript, te weten of het scherm van de gebruiker aanraak-capaciteit heeft.
JavaScript heeft geen standaard function om het schermptype te bepalen, dus moet je een trucje gebruiken. Dat werkt als volgt:
- Als een aanraakscherm beschikbaar is, bestaat er binnen het object document.documentElement een aantal event-handlers die specifiek zijn voor een aanraakscherm. Die ontbreken als er geen aanraakscherm is.
- Er wordt getest op de aanwezigheid van een veel gebruikte en breed ondersteunde event-handler. In dit voorbeeld wordt ontouchstart gebruikt.
- Het resultaat van de test is een boolean waarde: true of false. Deze wordt aan een variabele toegekend
voor verder gebruik. In dit voorbeeld is dat aanraakscherm.
- De code luidt (zet deze in de <head>):
<script>
let aanraakscherm = ("ontouchstart" in document.documentElement);
</script>
- De <body> van deze pagina bevat de volgende code:
<div id="melding" style="text-align:center; font-weight:bold;
color:maroon">Het script heeft uw scherm niet gedetecteerd.</div>
<script>
if (aanraakscherm) {
document.getElementById("melding").innerHTML =
"U heeft een aanraakscherm.";
} else {
document.getElementById("melding").innerHTML =
"U heeft GEEN aanraakscherm.";
}
</script>
- Deze code geeft op dit apparaat als resultaat:
Opmerking:
Het item Programmeren voor aanraakschermen geeft een overzicht van events
en eigenschappen die nodig zijn om je website geschikt te maken voor aanraakschermen.
Dit werkt niet met de desktop-versie van Safari, omdat die browser het object TouchEvent niet ondersteunt.
