Met de CSS touch-action kan een ontwikkelaar beperken hoe een gebruiker met een element kan communiceren, wat vooral handig is om te voorkomen dat gebeurtenissen worden verzonden wanneer dit niet nodig is.
Vóór versie 55 ondersteunde Chrome pan-x en pan-y , waardoor elementen beperkt werden tot scrollen in één richting.
De onderstaande video toont een voorbeeld van een element zonder gedefinieerde aanraakactie (links), evenals pan-x en pan-y (midden en rechts).
De CSS voor de middelste en rechter schermcasts is:
.pan-x {
touch-action: pan-x;
}
.pan-y {
touch-action: pan-y;
}
In Chrome 55 zijn pan-left , pan-right , pan-up en pan-down toegevoegd. Deze eigenschappen hebben een subtiel maar belangrijk verschil in gedrag.
Deze eigenschappen dwingen de gebruiker om gebaren in één richting te starten voordat het element reageert. Dit is vergelijkbaar met het "pull-to-refresh"-gebaar dat alleen reageert wanneer de gebruiker naar beneden gebaart op het scherm.
De volgende video demonstreert pan-right en pan-down waarbij gebaren respectievelijk van rechts naar links en van onder naar boven moeten beginnen. Zodra het gebaar is gestart, kunt u daadwerkelijk heen en weer pannen. Alleen de initiële richting wordt beïnvloed.
Hoewel de video dit gedrag demonstreert, vindt u het wellicht gemakkelijker om het zelf uit te proberen door het voorbeeld te bekijken .
De CSS voor deze demo is:
.pan-right {
touch-action: pan-right;
}
.pan-down {
touch-action: pan-down;
}
Het laatste dat gebeurt in de wereld van aanraakactie is de pinch-zoom eigenschap. Dit is een nieuwe eigenschap in Chrome 55, achter een vlag, die kan worden gebruikt met elk van de pan-opties (dat wil zeggen pan-x , pan-y , pan-left , pan-right , pan-down , pan-up ).
Als u op een website knijpt, wordt doorgaans ingezoomd op de inhoud van de pagina. Het definiëren van een touch-action voorkomt dit gedrag, maar het toevoegen van knijpzoom zal dit gedrag opnieuw inschakelen.
Deze video toont het verschil tussen touch-action: pan-x en touch-action: pan-x pinch-zoom ;
Al deze eigenschappen zouden een deel van de logica moeten vereenvoudigen die anders door ontwikkelaars zou moeten worden geïmplementeerd met behulp van pointer-events .