Forstå Touch-begivenheder i jQuery Mobile

I en verden, hvor mobiltelefoner og tablets er blevet vores primære interaktionspunkter med internettet, er det afgørende at udvikle webapplikationer, der ikke kun ser godt ud, men også føles intuitive og responsive på touch-skærme. jQuery Mobile, et webbaseret touch-optimeret UI-rammeværk, leverer en omfattende pakke af værktøjer og begivenheder, der specifikt er designet til at håndtere disse interaktioner. Ved at abstrahere kompleksiteten af native touch-begivenheder giver jQuery Mobile udviklere mulighed for nemt at implementere funktionalitet, der reagerer på brugerens berøringer, swipes og mange andre gestusser. Denne artikel udforsker de forskellige touch-begivenheder, der understøttes af jQuery Mobile, og hvordan de kan bruges til at forbedre brugeroplevelsen i dine mobile webapplikationer.

Grundlæggende Touch-begivenheder i jQuery Mobile

jQuery Mobile udvider standard JavaScript-begivenheder med en række brugerdefinerede touch-begivenheder, der er skræddersyet til mobile interaktioner. Disse begivenheder er designet til at reagere på almindelige touch-gestusser og tilbyder en mere semantisk måde at kode touch-interaktioner på end blot at lytte til generiske touchstart eller touchend begivenheder. De sikrer, at din kode fungerer ensartet på tværs af forskellige enheder, uanset om de understøtter touch eller en traditionel mus.

Tap-begivenheden

tap-begivenheden udløses, når en bruger hurtigt og fuldstændigt trykker på et element. Dette er den touch-ækvivalent til en standard klik-begivenhed og udløses ved frigivelse af touch-gestussen. Den er ideel til interaktive elementer som knapper eller links, hvor en hurtig berøring er nok til at aktivere en handling. Selvom den ligner en klik-begivenhed, er den optimeret til touch-miljøer og tilbyder en mere responsiv oplevelse på mobile enheder.

Taphold-begivenheden

taphold-begivenheden udløses, når en bruger trykker på et element og holder fingeren nede i et par sekunder (typisk tæt på et sekund). Denne begivenhed er nyttig til at implementere funktionalitet, der kræver en længere interaktion, såsom visning af en kontekstmenu, aktivering af en træk-og-slip-funktion eller visning af yderligere oplysninger, der ikke skal vises ved et simpelt tap.

Swipe-begivenheden

swipe-begivenheden udløses, når en bruger vandret trækker (swipes) mere end 30px over et element. Denne begivenhed er ret alsidig, da den udløses uanset retningen af swipet. Det er et fremragende værktøj til at implementere karuseller, navigationspaneler eller andre elementer, der kan skubbes til siden. jQuery Mobile giver dig mulighed for at konfigurere tærskelværdier for swipe-begivenheder for at finjustere deres følsomhed, herunder:

• scrollSupressionThreshold (standard: 10px): Over denne vandrette forskydning undertrykkes scrolling.
• durationThreshold (standard: 1000ms): Længere tid end dette, og det er ikke et swipe.
• horizontalDistanceThreshold (standard: 30px): Swipe's vandrette forskydning skal være mere end dette.
• verticalDistanceThreshold (standard: 75px): Swipe's lodrette forskydning skal være mindre end dette.

Swipeleft- og Swiperight-begivenhederne

Som navnet antyder, er swipeleft-begivenheden en specifik type swipe, der kun udløses, når brugeren trækker mere end 30px over et element i venstre retning. Tilsvarende udløses swiperight-begivenheden, når brugeren trækker i højre retning. Disse retningsspecifikke begivenheder er ideelle til at implementere specifikke handlinger baseret på swipe-retningen, såsom at navigere frem og tilbage mellem sider eller slette elementer fra en liste ved at swipe dem til siden.

Virtuelle Musebegivenheder i jQuery Mobile

For at sikre bred kompatibilitet på tværs af både touch- og desktop-miljøer tilbyder jQuery Mobile et sæt "virtuelle" musebegivenheder. Disse begivenheder abstraherer de underliggende touch- og musebegivenheder, så udviklere kan registrere lyttere for grundlæggende musebegivenheder (som mousedown, mousemove, mouseup og click), og rammeværket tager sig af at registrere de korrekte lyttere bag kulisserne. Dette betyder, at du kan skrive kode, der fungerer optimalt på både touch-enheder og traditionelle computere med mus, uden at skulle bekymre dig om de specifikke inputmetoder. De virtuelle musebegivenheder normaliserer også, hvordan koordinatinformation udtrækkes fra begivenheden, hvilket gør det nemmere at arbejde med positioner uanset enhed.

• vmouseover: Normaliseret begivenhed for håndtering af touch- eller muse-mouseover-begivenheder.
• vmousedown: Normaliseret begivenhed for håndtering af touchstart- eller mousedown-begivenheder.
• vmousemove: Normaliseret begivenhed for håndtering af touchmove- eller mousemove-begivenheder.
• vmouseup: Normaliseret begivenhed for håndtering af touchend- eller mouseup-begivenheder.
• vclick: Normaliseret begivenhed for håndtering af touchend- eller museklikbegivenheder. På touch-enheder udløses denne begivenhed EFTERvmouseup.
• vmousecancel: Normaliseret begivenhed for håndtering af touch- eller muse-mousecancel-begivenheder.

Advarsel om vclick-begivenheden

Det er vigtigt at udvise forsigtighed ved brug af vclick på touch-enheder. Webkit-baserede browsere (som Chrome og Safari) syntetiserer mousedown, mouseup og click-begivenheder cirka 300ms efter, at touchend-begivenheden er udløst. Dette kan føre til uforudsigelig adfærd, især hvis indholdet under det berørte punkt ændres. Hvis den handling, der udløses, potentielt kan ændre skærmens indhold (f.eks. sideovergange, kollaps/udvid-funktioner), anbefales det at bruge den almindelige click-begivenhed i stedet for vclick for at undgå uønskede sideeffekter.

Du kan annullere en elements standard klik-adfærd ved at kalde preventDefault() på en vclick-begivenhed. På musebaserede enheder svarer dette til at kalde preventDefault() på den rigtige click-begivenhed. På touch-enheder er det mere komplekst, da den faktiske klik-begivenhed udløses ca. 300ms efter vclick. jQuery Mobile forsøger at opfange og annullere den næste klik-begivenhed, men der kan opstå tilfælde, hvor dette fejler, og klik-begivenheden udløses alligevel, potentielt på et andet element.

Orientationsskifte-begivenheden

orientationchange-begivenheden udløses, når en enheds orientering ændres (fra lodret til vandret eller omvendt). Når du binder til denne begivenhed, kan din callback-funktion udnytte et andet argument, der indeholder en orientation-egenskab lig med enten "portrait" eller "landscape". Disse værdier tilføjes også som klasser til HTML-elementet, hvilket giver dig mulighed for at udnytte dem i dine CSS-selektorer til responsivt design. Bemærk, at jQuery Mobile falder tilbage til at binde til resize-begivenheden, hvis orientationchange ikke understøttes nativt, eller hvis $.mobile.orientationChangeEnabled er sat til false. Timingen af orientationchange i forhold til ændringen af klientens højde og bredde kan variere mellem browsere, så hvis dine bindinger afhænger af højde- og breddeværdier, kan du overveje at deaktivere den native orientationchange for at lade resize-begivenheden håndtere det.

Rulle-begivenheder

jQuery Mobile tilbyder også begivenheder til at spore scrolling-adfærd, hvilket er afgørende for at skabe en jævn og responsiv brugerflade på mobile enheder.

• scrollstart: Udløses, når en rulning begynder. Det er vigtigt at bemærke, at iOS-enheder fryser DOM-manipulation under rulning, og sætter dem i kø til anvendelse, når rulningen er færdig.
• scrollstop: Udløses, når en rulning slutter. Denne begivenhed er nyttig til at udløse handlinger, når brugeren er færdig med at rulle, f.eks. dynamisk indlæsning af indhold.

Sideindlæsningsbegivenheder

Når en ekstern side indlæses i applikationens DOM via jQuery Mobiles AJAX-navigationssystem, udløses en række begivenheder. Disse begivenheder giver dig finkornet kontrol over indlæsningsprocessen.

• pagebeforeload: Udløses, før en indlæsningsanmodning foretages. Callbacks bundet til denne begivenhed kan kalde preventDefault() for at indikere, at de selv håndterer indlæsningsanmodningen. Hvis dette gøres, skal de sikre sig, at de kalder resolve() eller reject() på det deferred-objekt, der er indeholdt i det dataobjekt, der sendes til callback'en. Dette giver dig mulighed for at implementere brugerdefinerede indlæsningslogikker.
• pageload: Udløses, efter at siden er blevet indlæst og indsat i DOM'en. Callbacks modtager et dataobjekt med information som url, absUrl, dataUrl, options, xhr og textStatus, hvilket giver dig adgang til detaljer om den indlæste side.
• pageloadfailed: Udløses, hvis sideindlæsningsanmodningen mislykkedes. Som standard viser rammeværket en fejlmeddelelse, men du kan forhindre denne standardadfærd ved at kalde preventDefault() og håndtere fejlen selv. Dataobjektet indeholder information om fejlen, herunder xhr, textStatus og errorThrown.

Sideskiftebegivenheder

Navigation mellem sider i en jQuery Mobile-applikation udføres typisk via $.mobile.changePage(). Denne funktion er ansvarlig for at sikre, at siden, vi navigerer til, er indlæst og indsat i DOM'en, og derefter starte overgangsanimationerne mellem den aktuelle aktive side og den side, der skal gøres aktiv. Under denne proces udløses følgende begivenheder:

• pagebeforechange: Udløses før enhver sideindlæsning eller overgang. Callbacks kan forhindre udførelsen af changePage()-funktionen ved at kalde preventDefault(). Dataobjektet, der sendes til callback'en, indeholder toPage (objekt eller streng, der repræsenterer den side, der skal gøres aktiv) og options. Du kan modificere disse egenskaber for at ændre adfærden af changePage(), f.eks. ved at omdirigere til en anden URL.
• pagechange: Udløses, når changePage()-anmodningen er færdig med at indlæse siden i DOM'en, og alle sideovergangsanimationer er afsluttet. Bemærk, at eventuelle pageshow- eller pagehide-begivenheder vil være udløst FØR denne begivenhed.
• pagechangefailed: Udløses, når changePage()-anmodningen mislykkes med at indlæse siden.

Sidetransitionsbegivenheder

Sideovergange bruges til at animere ændringen fra den aktuelle aktive side til en ny side. Begivenheder udløses før og efter disse overgange, så observatører kan meddeles, når sider vises eller skjules. Disse er afgørende for at skabe flydende animationer og opdatere indhold dynamisk.

• pagebeforeshow: Udløses på "til-siden", vi overgår til, før den faktiske overgangsanimation starter. Dataobjektet indeholder prevPage, en jQuery-samling af den side, vi forlader.
• pagebeforehide: Udløses på "fra-siden", vi overgår fra, før den faktiske overgangsanimation starter. Dataobjektet indeholder nextPage, en jQuery-samling af den side, vi overgår til.
• pageshow: Udløses på "til-siden", efter at overgangsanimationen er afsluttet. Dataobjektet indeholder prevPage.
• pagehide: Udløses på "fra-siden", efter at overgangsanimationen er afsluttet. Dataobjektet indeholder nextPage.

For at disse håndterere skal udløses under den første sideindlæsning, skal du binde dem, før jQuery Mobile udføres. Dette kan gøres i mobileinit-håndtereren, som beskrevet på den globale konfigurationsside. Det er god praksis at bruge .on() til at binde begivenheder i moderne jQuery, da .live() og .bind() er blevet forældede.

Sideinitialiseringsbegivenheder

Internt auto-initialiserer jQuery Mobile plugins baseret på markup-konventioner fundet på en given "side". Disse initialiseringsbegivenheder giver dig mulighed for at manipulere en side enten før eller efter initialisering, eller endda give din egen initialiseringsadfærd.

• pagebeforecreate: Udløses på siden, der initialiseres, før de fleste plugin auto-initialiseringer finder sted. Ved at binde til denne begivenhed kan du manipulere markup, før jQuery Mobiles standard-widgets auto-initialiseres.
• pagecreate: Udløses, når siden er blevet oprettet i DOM'en (via AJAX eller andet), men før alle widgets har haft mulighed for at forbedre det indeholdte markup. Denne begivenhed er mest nyttig for brugere, der ønsker at oprette deres egne brugerdefinerede widgets til forbedring af barnemarkup.
• pageinit: Udløses på siden, der initialiseres, efter initialisering finder sted. Dette er den anbefalede begivenhed at binde til i stedet for $(document).ready(). Årsagen er, at jQuery Mobile bruger AJAX til at indlæse indholdet af hver side i DOM'en, når du navigerer, og $(document).ready()-håndtereren udføres kun for den første side. Ved at binde til pageinit udføres din kode, hver gang en ny side indlæses og oprettes, hvilket sikrer, at dit JavaScript kører på alle sider i din applikation.

Sidefjernelsesbegivenheder

Som standard fjerner rammeværket alle ikke-aktive dynamisk indlæste eksterne sider fra DOM'en, så snart brugeren navigerer væk til en anden side. pageremove-begivenheden udløses lige før rammeværket forsøger at fjerne en side fra DOM'en.

• pageremove: Udløses lige før rammeværket forsøger at fjerne en ekstern side fra DOM'en. Event-callbacks kan kalde preventDefault() på begivenhedsobjektet for at forhindre, at siden fjernes, hvilket kan være nyttigt til caching eller genbrug af sider.

Layoutbegivenheder

Nogle komponenter i rammeværket, såsom sammenklappelige elementer og listevisningssøgning, skjuler og viser dynamisk indhold baseret på brugerbegivenheder. Dette påvirker sidens størrelse og kan resultere i, at browseren justerer eller ruller visningsporten. For at håndtere dette udløser disse komponenter en brugerdefineret updatelayout-begivenhed.

• updatelayout: Denne begivenhed udløses af komponenter, der dynamisk viser/skjuler indhold, og er beregnet som en generisk mekanisme til at underrette andre komponenter om, at de muligvis skal opdatere deres størrelse eller position. Udviklere, der bygger dynamiske applikationer, der injicerer, skjuler eller fjerner indhold fra siden, eller manipulerer det på en måde, der påvirker sidens dimensioner, kan også manuelt udløse denne updatelayout-begivenhed for at sikre, at komponenter på siden opdateres som reaktion på ændringerne.

Almindelige Spørgsmål om jQuery Mobile Begivenheder

Hvorfor skal jeg bruge pageinit i stedet for $(document).ready()?

$(document).ready() udløses kun én gang, når den indledende DOM er indlæst. Da jQuery Mobile bruger AJAX til at indlæse nye sider dynamisk i DOM'en, vil kode inde i $(document).ready() ikke blive udført for efterfølgende indlæste sider. pageinit-begivenheden udløses derimod, hver gang en ny side er blevet initialiseret og indsat i DOM'en, hvilket sikrer, at dit JavaScript kører korrekt på alle sider i din applikation, uanset hvordan de indlæses.

Hvad er forskellen mellem pagecreate og pageinit?

pagecreate udløses, når siden er blevet oprettet i DOM'en, men før jQuery Mobile-widgets har forbedret markup'en. Dette er nyttigt, hvis du vil manipulere rå HTML-markup eller oprette dine egne brugerdefinerede widgets. pageinit udløses efter, at jQuery Mobile har initialiseret og forbedret alle sine widgets på siden. Det er det ideelle tidspunkt at interagere med de jQuery Mobile-forbedrede elementer på siden.

Kan jeg tilpasse tærsklerne for swipe-begivenheder?

Ja, absolut. jQuery Mobile giver dig mulighed for at konfigurere tærskelværdier for swipe-begivenheder som scrollSupressionThreshold, durationThreshold, horizontalDistanceThreshold og verticalDistanceThreshold. Dette giver dig fuld kontrol over, hvor følsomme dine swipe-gestusser skal være, og hvordan de interagerer med scrolling.

Er jQuery Mobile touch-begivenheder kompatible med desktop-browsere?

Ja. jQuery Mobile er designet til at fungere problemfrit på tværs af både touch- og desktop-miljøer. De virtuelle musebegivenheder (vclick, vmousedown osv.) abstraherer de underliggende touch- og musebegivenheder, hvilket betyder, at du kan binde til dem, og jQuery Mobile vil automatisk håndtere den korrekte lytter bag kulisserne. Dette understøtter en enkelt kodebase for mobil- og desktop-applikationer.

Hvorfor skal jeg være forsigtig med vclick?

På Webkit-baserede touch-enheder (f.eks. iOS Safari, Android Chrome) kan der opstå en forsinkelse på ca. 300ms, før en simuleret klik-begivenhed udløses efter en touch-begivenhed. Dette kan føre til "ghost clicks" eller klik på uventede elementer, hvis DOM'en ændres hurtigt efter en berøring. Hvis en handling, der udløses af et klik, potentielt ændrer sidens indhold eller layout, anbefales det at bruge den almindelige click-begivenhed for at undgå uforudsigelig adfærd.

Konklusion

jQuery Mobiles omfattende sæt af touch-begivenheder og sidehåndteringsmekanismer er en kraftfuld ressource for enhver udvikler, der ønsker at skabe responsive og intuitive webapplikationer til mobile enheder. Ved at forstå og udnytte begivenheder som tap, swipe, de virtuelle musebegivenheder og de mange sidelevetidsbegivenheder, kan du finjustere din applikations interaktioner og sikre en problemfri brugeroplevelse. Evnen til at håndtere navigation, sideindlæsning og layoutændringer med dedikerede begivenheder forenkler kompleksiteten ved mobiludvikling og giver dig kontrol over hver eneste detalje. Selvom jQuery Mobile måske ikke er det nyeste rammeværk på markedet, er dets begivenhedssystem stadig en fremragende demonstration af, hvordan man bygger robuste touch-baserede grænseflader.

Hvis du vil læse andre artikler, der ligner Forstå Touch-begivenheder i jQuery Mobile, kan du besøge kategorien Mobiludvikling.