Pekgester: En omfattande guide till implementering i JavaScript

I dagens mobilanpassade värld har pekgester blivit en integrerad del av användarupplevelsen. Från enkla tryck till komplexa interaktioner med flera fingrar erbjuder pekgester ett naturligt och intuitivt sätt för användare att interagera med webbapplikationer. Denna omfattande guide utforskar världen av pekgester och ger en steg-för-steg-metod för att implementera dem i dina JavaScript-projekt.

Förstå pekhändelser

Innan vi dyker in i gestigenkänning är det avgörande att förstå de underliggande pekhändelserna som driver dessa interaktioner. JavaScript tillhandahåller en uppsättning händelser som utlöses när en användare rör vid skärmen. Dessa händelser ger information om beröringen, såsom dess position och tillstånd.

Grundläggande pekhändelser:

• touchstart: Utlöses när en pekpunkt placeras på pekytan.
• touchmove: Utlöses när en pekpunkt flyttas längs pekytan.
• touchend: Utlöses när en pekpunkt tas bort från pekytan.
• touchcancel: Utlöses när en pekinteraktion avbryts (t.ex. av en systemavisering).

Var och en av dessa händelser innehåller egenskapen `touches`, som är en lista med `Touch`-objekt. Varje `Touch`-objekt representerar en enskild kontaktpunkt på skärmen och innehåller information som:

• clientX: Pekpunktens horisontella koordinat i förhållande till visningsområdet.
• clientY: Pekpunktens vertikala koordinat i förhållande till visningsområdet.
• screenX: Pekpunktens horisontella koordinat i förhållande till skärmen.
• screenY: Pekpunktens vertikala koordinat i förhållande till skärmen.
• target: DOM-elementet som berördes.
• identifier: En unik identifierare för pekpunkten (användbart för multi-touch-interaktioner).

Exempel: Logga pekkoordinater

Detta enkla exempel visar hur man loggar koordinaterna för en pekpunkt när användaren rör vid skärmen:

            
 document.addEventListener('touchstart', function(event) {
  event.preventDefault(); // Förhindrar webbläsarens standardbeteende (t.ex. skrollning)
  let touch = event.touches[0];
  console.log('Pekning startade vid X: ' + touch.clientX + ', Y: ' + touch.clientY);
 });

            

              
                Copy
              
            
          

Observera: Metoden `preventDefault()` används ofta för att förhindra webbläsaren från att utföra sitt standardbeteende vid pekning, som att skrolla eller zooma.

Implementera grundläggande gester

Med en solid förståelse för pekhändelser kan vi nu implementera grundläggande gester. Låt oss titta på exempel som tryck, svep och dra. Dessa kommer att förklaras genom att först definiera vad de är, och sedan ge JavaScript-exempel.

Tryckgest

En tryckgest är en snabb beröring och släpp på skärmen. För att implementera en tryckgest kan vi spåra händelserna `touchstart` och `touchend` och mäta tidsskillnaden mellan dem. Om tidsskillnaden är under en viss tröskel (t.ex. 200 millisekunder) betraktar vi det som ett tryck.

            
 let tapStartTime = null;

 document.addEventListener('touchstart', function(event) {
  tapStartTime = new Date().getTime();
 });

 document.addEventListener('touchend', function(event) {
  let tapEndTime = new Date().getTime();
  let tapDuration = tapEndTime - tapStartTime;

  if (tapDuration < 200) {
   console.log('Tryck upptäckt!');
  }
 });

            

              
                Copy
              
            
          

Svepgest

En svepgest är en snabb, riktad rörelse över skärmen. För att upptäcka ett svep måste vi spåra start- och slutpositionerna för beröringen och beräkna avståndet och riktningen på rörelsen. Vi måste också ta hänsyn till svepets varaktighet.

            
 let swipeStartX = null;
 let swipeStartY = null;

 document.addEventListener('touchstart', function(event) {
  swipeStartX = event.touches[0].clientX;
  swipeStartY = event.touches[0].clientY;
 });

 document.addEventListener('touchend', function(event) {
  let swipeEndX = event.changedTouches[0].clientX;
  let swipeEndY = event.changedTouches[0].clientY;
  let deltaX = swipeEndX - swipeStartX;
  let deltaY = swipeEndY - swipeStartY;
  let swipeDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);

  if (swipeDistance > 50) { // Justera tröskelvärdet vid behov
   let angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI;

   if (angle > -45 && angle <= 45) {
    console.log('Svep höger!');
   } else if (angle > 45 && angle <= 135) {
    console.log('Svep ner!');
   } else if (angle > 135 || angle <= -135) {
    console.log('Svep vänster!');
   } else {
    console.log('Svep upp!');
   }
  }
 });

            

              
                Copy
              
            
          

Draggest

En draggest innebär att man rör vid ett element och flyttar det över skärmen. För att implementera en draggest måste vi spåra händelsen touchmove och uppdatera elementets position därefter.

            
 let dragging = false;
 let offsetX, offsetY;
 let element = document.getElementById('draggableElement');

 element.addEventListener('touchstart', function(event) {
  dragging = true;
  offsetX = event.touches[0].clientX - element.offsetLeft;
  offsetY = event.touches[0].clientY - element.offsetTop;
 });

 document.addEventListener('touchmove', function(event) {
  if (dragging) {
   element.style.left = (event.touches[0].clientX - offsetX) + 'px';
   element.style.top = (event.touches[0].clientY - offsetY) + 'px';
  }
 });

 document.addEventListener('touchend', function(event) {
  dragging = false;
 });

            

              
                Copy
              
            
          

Se till att du har ett element med id "draggableElement" i din HTML:

            
 
Dra mig!

            

              
                Copy
              
            
          

Multi-touch-gester

Multi-touch-gester involverar användning av flera fingrar för att interagera med skärmen. Detta möjliggör mer komplexa och uttrycksfulla interaktioner, som att nypa för att zooma och rotera.

Nyp-för-att-zooma

Nyp-för-att-zooma är en vanlig gest som används för att zooma in och ut på en bild eller karta. För att implementera nyp-för-att-zooma måste vi spåra avståndet mellan två pekpunkter och justera elementets skala därefter.

            
 let initialDistance = null;
 let currentScale = 1;
 let element = document.getElementById('zoomableImage');

 function getDistance(event) {
  let touch1 = event.touches[0];
  let touch2 = event.touches[1];
  let x = touch2.clientX - touch1.clientX;
  let y = touch2.clientY - touch1.clientY;
  return Math.sqrt(x * x + y * y);
 }

 element.addEventListener('touchstart', function(event) {
  if (event.touches.length === 2) {
   initialDistance = getDistance(event);
  }
 });

 element.addEventListener('touchmove', function(event) {
  if (event.touches.length === 2) {
   event.preventDefault();
   let currentDistance = getDistance(event);
   let scaleFactor = currentDistance / initialDistance;
   currentScale *= scaleFactor; // Ackumulera skalning
   element.style.transform = 'scale(' + currentScale + ')';
   initialDistance = currentDistance; // Återställ för nästa rörelse
  }
 });

 element.addEventListener('touchend', function(event) {
  initialDistance = null;
 });

            

              
                Copy
              
            
          

Se till att du har en bild med id "zoomableImage" i din HTML:

            
 

            

              
                Copy
              
            
          

Rotation

Rotation innebär att rotera ett element med två fingrar. För att implementera rotation måste vi spåra vinkeln mellan två pekpunkter och rotera elementet därefter.

            
 let initialAngle = null;
 let currentRotation = 0;
 let element = document.getElementById('rotatableImage');

 function getAngle(event) {
  let touch1 = event.touches[0];
  let touch2 = event.touches[1];
  return Math.atan2(touch2.clientY - touch1.clientY, touch2.clientX - touch1.clientX) * 180 / Math.PI;
 }

 element.addEventListener('touchstart', function(event) {
  if (event.touches.length === 2) {
   initialAngle = getAngle(event);
  }
 });

 element.addEventListener('touchmove', function(event) {
  if (event.touches.length === 2) {
   event.preventDefault();
   let currentAngle = getAngle(event);
   let rotation = currentAngle - initialAngle;
   currentRotation += rotation; // Ackumulera rotation
   element.style.transform = 'rotate(' + currentRotation + 'deg)';
   initialAngle = currentAngle; // Återställ för nästa rörelse
  }
 });

 element.addEventListener('touchend', function(event) {
  initialAngle = null;
 });

            

              
                Copy
              
            
          

Se till att du har en bild med id "rotatableImage" i din HTML:

            
 

            

              
                Copy
              
            
          

Bibliotek för gestigenkänning

Att implementera komplexa gester från grunden kan vara utmanande och tidskrävande. Lyckligtvis finns det flera JavaScript-bibliotek som kan förenkla processen för gestigenkänning. Dessa bibliotek tillhandahåller färdiga gestigenkännare och verktyg för att hantera pekhändelser.

Hammer.js

Hammer.js är ett populärt JavaScript-bibliotek för att känna igen gester. Det stöder ett brett utbud av gester, inklusive tryck, dubbeltryck, svep, nyp, rotera och panorera. Det är lättviktigt, enkelt att använda och mycket anpassningsbart. Hammer.js fungerar genom att lyssna på pekhändelser och sedan avgöra vilken handling användaren utför baserat på pekpunkternas position och varaktighet.

            
 // Inkludera Hammer.js i din HTML
 // 

 let element = document.getElementById('myElement');
 let hammer = new Hammer(element);

 hammer.on('tap', function(event) {
  console.log('Tryckhändelse upptäckt');
 });

 hammer.on('swipe', function(event) {
  console.log('Svephändelse upptäckt');
  console.log('Svepriktning: ' + event.direction);
 });

 hammer.get('pinch').set({ enable: true });
 hammer.get('rotate').set({ enable: true });

 hammer.on('pinch', function(event) {
  console.log('Nyphändelse upptäckt');
  element.style.transform = 'scale(' + event.scale + ')';
 });

 hammer.on('rotate', function(event) {
  console.log('Rotationshändelse upptäckt');
  element.style.transform = 'rotate(' + event.rotation + 'deg)';
 });

            

              
                Copy
              
            
          

AlloyFinger

AlloyFinger är ett annat populärt JavaScript-bibliotek som specialiserar sig på gestigenkänning, särskilt för mobila enheter. Det är känt för sin lilla storlek och goda prestanda. Det fokuserar på vanliga pekgester som tryck, svep, nyp, rotera och press. Det erbjuder ett lättanvänt API för att binda gester till element.

            
 // Inkludera AlloyFinger i din HTML
 //  // Ersätt med din sökväg till AlloyFinger

 let element = document.getElementById('myElement');
 let af = new AlloyFinger(element, {
  tap: function() {
   console.log('Tryckhändelse upptäckt');
  },
  swipe: function(evt) {
   console.log('Svephändelse upptäckt');
   console.log('Svepriktning: ' + evt.direction); // upp, ner, vänster, höger
  },
  pinch: function(evt) {
   console.log('Nyphändelse upptäckt');
   element.style.transform = 'scale(' + evt.scale + ')';
  },
  rotate: function(evt) {
   console.log('Rotationshändelse upptäckt');
   element.style.transform = 'rotate(' + evt.angle + 'deg)';
  }
 });

            

              
                Copy
              
            
          

Tillgänglighetsaspekter

När du implementerar pekgester är det viktigt att tänka på tillgängligheten för användare med funktionsnedsättningar. Vissa användare kanske inte kan använda pekgester på grund av motoriska funktionsnedsättningar. Genom att erbjuda alternativa inmatningsmetoder, som tangentbordskontroller eller röstkommandon, säkerställer du att din applikation är tillgänglig för en bredare publik.

• Tangentbordsnavigering: Se till att alla interaktiva element kan nås och manipuleras med tangentbordet.
• Kompatibilitet med skärmläsare: Använd ARIA-attribut för att ge semantisk information om pekgester till skärmläsare.
• Tillräcklig kontrast: Se till att det finns tillräcklig kontrast mellan text och bakgrundsfärger för att göra gränssnittet läsbart för användare med nedsatt syn.
• Storlek på pekmål: Se till att pekmålen är tillräckligt stora (minst 44x44 pixlar) för att enkelt kunna tryckas på av användare med motoriska funktionsnedsättningar.

Prestandaoptimering

Pekhändelser kan vara beräkningsintensiva, särskilt vid hantering av komplexa gester. Att optimera din kod för prestanda är avgörande för att säkerställa en smidig och responsiv användarupplevelse.

• Använd händelsedelegering: Fäst händelselyssnare på ett föräldraelement istället för på enskilda element för att minska antalet händelselyssnare.
• Stryp händelsehanterare: Begränsa frekvensen med vilken händelsehanterare exekveras för att förhindra prestandaflaskhalsar.
• Använd requestAnimationFrame: Använd `requestAnimationFrame` för att schemalägga animationer och uppdateringar, vilket säkerställer att de synkroniseras med webbläsarens renderingscykel.
• Undvik överdriven DOM-manipulering: Minimera DOM-manipulering, eftersom det kan vara en prestandaflaskhals.
• Testa på riktiga enheter: Testa alltid din kod på riktiga enheter för att identifiera prestandaproblem. Emulatorer kanske inte exakt återspeglar prestandan på riktiga enheter.

Kompatibilitet mellan webbläsare

Stödet för pekhändelser varierar mellan olika webbläsare och enheter. Det är avgörande att testa din kod på en mängd olika webbläsare och enheter för att säkerställa kompatibilitet. Överväg att använda polyfills eller bibliotek som abstraherar bort webbläsarskillnader.

• Använd Modernizr: Använd Modernizr för att upptäcka stöd för pekhändelser och tillhandahålla reservmekanismer för webbläsare som inte stöder pekhändelser.
• Testa på olika enheter: Testa din kod på en mängd olika enheter, inklusive smartphones, surfplattor och bärbara datorer med pekskärm.
• Överväg Polyfills: Använd polyfills för att ge stöd för pekhändelser i äldre webbläsare.

Internationaliseringsaspekter (i18n)

När du implementerar pekgester, kom ihåg att ta hänsyn till internationalisering (i18n). Även om pekinteraktioner i sig själva i allmänhet är språkoberoende, bör de omgivande UI-elementen och återkopplingsmekanismerna lokaliseras för olika språk och regioner.

• Textriktning: Hantera språk som skrivs från höger till vänster (RTL) korrekt. Till exempel kan svepgester behöva vändas i RTL-layouter.
• Nummer- och datumformat: Se till att siffror och datum som används i återkopplingsmeddelanden formateras enligt användarens lokala inställningar.
• Kulturell medvetenhet: Var medveten om kulturella skillnader i tolkningen av gester. En gest som är vanlig i en kultur kan vara stötande i en annan. Undersök och anpassa din design därefter.
• Anpassningsbart UI: Se till att ditt UI kan anpassas till olika textlängder när det översätts till olika språk. Detta kan påverka placeringen och storleken på pekmål.

Globala exempel och överväganden

Låt oss titta på hur pekgester kan tillämpas olika i olika globala sammanhang:

• E-handel i Asien: Många asiatiska e-handelsappar använder komplex gestbaserad navigering för produktbläddring och köp. Överväg att erbjuda strömlinjeformade pekinteraktioner för användare i regioner med begränsad dataanslutning.
• Spel i Latinamerika: Mobilspel är mycket populärt i Latinamerika. Att optimera pekkontroller för snabba spel är viktigt för en bra användarupplevelse.
• Utbildning i Afrika: Pekbaserade utbildningsappar används för att undervisa barn i skolor. Enkla och intuitiva pekgester kan förbättra inlärningsupplevelsen.
• Navigering i Europa: Kartappar i Europa drar nytta av smidiga zoom- och rotationsgester, särskilt vid utforskning av historiska platser.

Slutsats

Pekgester är ett kraftfullt verktyg för att skapa engagerande och intuitiva användarupplevelser. Genom att förstå de underliggande pekhändelserna och använda lämpliga tekniker för gestigenkänning kan du implementera ett brett utbud av gester i dina JavaScript-projekt. Kom ihåg att ta hänsyn till tillgänglighet, prestanda och kompatibilitet mellan webbläsare för att säkerställa att din applikation fungerar bra för alla användare. I takt med att tekniken utvecklas kan du förvänta dig att se nya typer av gester och interaktioner; fortsätt att lära dig för att ligga i framkant av digitala upplevelser.