Láttu síðuna þína virka á snertitækjum

Efni.

• Þurfum við að hafa áhyggjur af snertingu?
• Annmarkar á líkum músaviðburðum
• Seinkaðir viðburðir við smell
• Að rekja fingur hreyfingar
• "Við verðum að fara dýpra ..."
• Aðgerðaleit fyrir stuðning við snertiviðburði
• Vinna í kringum töf á smell
• Fylgihreyfing með snertiflutningi
• Líffærafræði snertiviðburðar
• Notkun snertiviðburða til að fylgjast með fingrum
• Frammistöðusjónarmið
• Niðurstaða

Snertiskjár á farsímum, spjaldtölvum og snertivörum fartölvum og skjáborðum opna alveg nýtt úrval af samskiptum fyrir vefhönnuði. Í þessari kynningu munum við skoða grunnatriðin í því hvernig meðhöndla skal snertingaratburði í JavaScript. Sjáðu kennsluskrár sem hægt er að hlaða niður til að styðja við dæmi um skref fyrir skref.

Þurfum við að hafa áhyggjur af snertingu?

Með hækkun snertiskjáa hefur ein grundvallarspurning verktaki verið: hvað þarf ég að gera til að tryggja að vefsíðan mín eða vefforrit virki á snertitæki? Það kemur á óvart að í flestum tilfellum er svarið: alls ekki neitt. Sjálfgefið er að vafrar í farsímum eru hannaðir til að takast á við mikið magn af núverandi vefsíðum sem ekki voru þróaðar sérstaklega fyrir snertingu. Þessir vafrar virka ekki aðeins vel með kyrrstæðar síður, þeir sjá einnig um síður sem veita kraftmikla gagnvirkni í gegnum músasértækt JavaScript, þar sem skriftum hefur verið tengt við atburði eins mús yfir.

Í þessu skyni kveikja vafrar í snertivirkjum uppgerðar, eða tilbúnar, músaviðburði. Einföld prófunarsíða (sjá dæmi1.html í kennsluskrám) sýnir að, jafnvel á snertitæki, slærðu á hnappinn eftirfarandi atburðarás: mús yfir > (stök) mousemove > mousedown > mouseup > smellur.

Þessir atburðir koma af stað hratt í röð og nánast engin töf á milli þeirra. Taktu einnig eftir smáskífunni „fórnandi“ mousemove atburður, sem er innifalinn til að tryggja að öll smáforrit sem kunna að hlusta á hreyfingu músar, séu einnig framkvæmd að minnsta kosti einu sinni. Ef vefsíðan þín er eins og stendur til að bregðast við músaviðburðum mun virkni hennar (í flestum tilfellum) enn virka án þess að þurfa breytingar á snertitækjum.

Annmarkar á líkum músaviðburðum

Eins gott og gallinn við herma atburði er mús, eru þó enn aðstæður þar sem eingöngu að treysta á músarsértækar forskriftir geta leitt til ófullkominnar upplifunar.

Seinkaðir viðburðir við smell

Þegar snertiskjár er notaður sýna vafrar tilbúna töf (á bilinu um það bil 300 ms) milli snertaaðgerðar, svo sem að smella á hlekk eða hnapp og tímans raunverulega smellur atburður er rekinn. Þessi töf gerir notendum kleift að tappa tvisvar (til dæmis til að súmma og draga inn á síðu) án þess að virkja óvart síðuþætti (sjá dæmi2.html). Þessi seinkun getur verið vandamál ef þú vilt búa til vefforrit sem finnst fínt og móðurmál. Fyrir venjulegar vefsíður er ólíklegt að þetta sé vandamál þar sem þetta er sjálfgefin hegðun sem notendur skilja á flestum síðum.

Að rekja fingur hreyfingar

Eins og við sáum, þá eru tilbúnir músaviðburðir sem vafrinn sendir einnig með mousemove atburður. Þetta verður alltaf bara einn mousemove. Reyndar, ef notendur færa fingrinum of mikið yfir skjáinn, þá verða tilbúnir atburðir alls ekki reknir, þar sem vafrinn túlkar hreyfinguna sem látbragð, svo sem að fletta. Þetta er vandamál ef vefsvæðið þitt reiðir sig á samskipti sem fela í sér músahreyfingar (svo sem teikniforrit eða HTML-byggða leiki), eins og einfaldlega að hlusta á mousemove mun ekki virka á snertitækjum. Til að sýna þetta skulum við búa til einfalt striga-bundið forrit (sjá dæmi3.html). Frekar en tiltekin útfærsla höfum við áhuga á því hvernig handritið á að bregðast við mousemove:

var posX, posY; ... virka stöðuHandler (e) {posX = e.clientX; posY = e.clientY; } ... canvas.addEventListener (‘mousemove’, positionHandler, false);

Ef þú prófar dæmi þrjú (í kennsluskrám) með mús sérðu að staða bendilsins er stöðugt rakin þegar þú ferð yfir striga Í snertitæki munt þú taka eftir því að það bregst ekki við fingurhreyfingum; það skráir sig aðeins þegar notandi pikkar á skjáinn, sem mun hleypa þessu eina tilbúna mousemove atburður.

"Við verðum að fara dýpra ..."

Til að vinna úr þessum málum þurfum við að skíta í hendurnar á lægra útdráttarstigi. Snertiviðburðir voru fyrst kynntir í Safari fyrir iOS 2.0 og í kjölfar útbreiddrar notkunar í (næstum) öllum öðrum vöfrum voru stöðluð aftur í tímann í forskrift W3C Touch Events. Nýju viðburðirnir sem fylgja snertiviðburðarlíkaninu eru: snertistart, snerta hreyfingu, snerta og snertikort. Fyrstu þrír eru snertisértækt jafngildir hinu hefðbundna mousedown, mousemove og mouseup atburði. Á hinn bóginn, snertikort er rekinn þegar snertiverkun er rofin eða henni hætt. Til dæmis þegar notandi færir fingurinn utan núverandi skjals og inn í raunverulegt viðmót vafrans. Að horfa á röðina sem bæði snertimyndir og tilbúnar músaviðburðir eru sendar fyrir krana (sjá dæmi4.html í kennsluskrám) fáum við eftirfarandi röð: snertistart > [ snerta hreyfingu ]+ > snerta > mús yfir > (stök) mousemove > mousedown > mouseup > smellur.

Í fyrsta lagi fáum við alla snertisértæku atburðina: snertistart, núll eða meira snerta hreyfingu (fer eftir því hversu notandi tekst að banka á hreint án þess að hreyfa fingurinn við snertingu við skjáinn) og snerta. Eftir það mun vafrinn reka tilbúna músaviðburði og lokakeppnina smellur.

Aðgerðaleit fyrir stuðning við snertiviðburði

Til að ákvarða hvort tiltekinn vafri styður snertiviðburði getum við notað einfaldan skilning á JavaScript-eiginleikum:

ef (‘ontouchstart’ í glugga) {/ * vafra með stuðningi viðkomuaðgerða * /}

Þessi bútur virkar áreiðanlega í nútíma vöfrum. Eldri útgáfur hafa nokkra sérkenni og ósamræmi sem krefst þess að þú hoppir í gegnum ýmsar mismunandi greiningarstefnur. Ef forritið þitt miðar á eldri vafra skaltu prófa Modernizr (modernizr. Com) og ýmsar snertiprófunaraðferðir þess, sem slétta yfir flest þessi mál.

Þegar við erum að framkvæma slíka eiginleikagreiningu verðum við að vera skýr hvað við erum að prófa. Fyrra brotið kannar aðeins hvort vafri geti skilið snertingaratburði og ætti ekki að nota það sem einfaldan hátt til að athuga hvort núverandi síða sé skoðuð á tæki sem eingöngu snertir skjáinn. Það er nýr flokkur tvinntækja sem eru bæði með hefðbundinn fartölvu eða skjáborðsform (mús, stýripall, lyklaborð) og snertiskjá (Windows 8 vélar eða Chromebook Pixel Google). Sem slík er það ekki lengur annaðhvort eða tillaga um það hvort notandinn muni hafa samskipti við síðuna okkar með snertiskjá eða mús.

Vinna í kringum töf á smell

Ef við prófum atburðarásina sem vafrinn sendir á snertitæki og inniheldur nokkrar tímasetningarupplýsingar (sjá dæmi5.html í kennsluskrám) er 300ms töf kynnt eftir snerta atburður: snertistart > [ snerta hreyfingu ]+ > snerta > [300ms seinkun]> mús yfir > (stök) mousemove > mousedown > mouseup > smellur.

Svo ef handritin okkar eru nú til að bregðast við smellur atburði getum við fjarlægt slaka hegðun vafrans og komið í veg fyrir sjálfgefna töf. Við gerum þetta með því að bregðast við hvorugum snerta eða snertistart - hið síðarnefnda fyrir viðmótsþætti sem þurfa að kvikna strax þegar notandi snertir skjáinn, svo sem stýringar fyrir HTML-byggða leiki.

Enn og aftur verðum við að vera varkár ekki með rangar forsendur um stuðning við snertiviðburði og raunverulega notkun snertiskjás. Hér er eitt af algengu frammistöðubrögðum sem eru mjög vinsæl og oft nefnd í hagræðingargreinum fyrir farsíma.

/ * ef snerting er studd, hlustaðu á ‘touchend’, annars ‘smelltu’ * / var clickEvent = (‘ontouchstart’ í glugga? ’touchend’: ‘smellur’); blah.addEventListener (clickEvent, function () {...});

Þrátt fyrir að þetta handrit sé vel meint, þá er sú nálgun sem gagnast eingöngu að hlusta á annað hvort smellur eða snerta veltur á stuðningi vafra við snertiviðburði mun valda vandamálum á blendingstækjum þar sem það lokar strax fyrir öll samskipti í gegnum mús, stýripall eða lyklaborð.

Af þessum sökum væri öflugri nálgun að hlusta á báðar gerðir atburða:

blah.addEventListener (‘smellur’, einhverFunction, fölskur); blah.addEventListener (‘touchend’, someFunction, false);

Vandamálið við þessa nálgun er að aðgerð okkar verður framkvæmd tvisvar: einu sinni vegna snerta, og í annað sinn þegar tilbúnar músaviðburðir og smellur er verið að reka. Ein leið til að vinna úr þessu er að bæla aftur viðburði músarinnar með því að nota preventDefault (). Við getum líka komið í veg fyrir endurtekningu kóða með því einfaldlega að gera snerta atburður kveikja á raunverulegu smellur atburður.

blah.addEventListener (‘touchend’, function (e) {e.preventDefault (); e.target.click ();}, false); blah.addEventListener (‘smellur’, einhverFunction, ósatt);

Það er afli. Þegar þú notar preventDefault (), við bælum einnig alla aðra vanræksluhegðun vafrans. Ef við beitum því beint á snertistart atburðir, önnur virkni eins og að fletta, smella eða aðdráttur verður einnig bældur. Stundum getur þetta verið æskilegt, en almennt ætti að nota þessa aðferð með varúð. Athugaðu einnig að dæmið hér að ofan hefur ekki verið fullkomið fínstillt. Til að fá öfluga útfærslu, skoðaðu FastClick hjá FTLabs.

Fylgihreyfing með snertiflutningi

Vopnaðir með þekkingu okkar á snertingaratburðum, skulum nú fara aftur í rakadæmið (eins og sést á dæmi3.html) og sjáðu hvernig við getum breytt því til að fylgjast einnig með fingurhreyfingum á snertiskjá.

Áður en við skoðum sérstakar breytingar sem þarf í handritinu okkar, verðum við að bakka aðeins til að skilja hvernig snertingaratburðir eru frábrugðnir músaratburðum.

Líffærafræði snertiviðburðar

Í samræmi við Document Object Model (DOM) stig 2 atburðargreiningaraðgerðir sem hlusta á músaviðburði fá a Músaviðburður hlut sem breytu. Þessi hlutur inniheldur hnitareiginleika eins og clientX og viðskiptavinur , sem handrit okkar (dæmi3.html í kennsluskrám) notar til að ákvarða núverandi músarstöðu.

Til dæmis:

tengi MouseEvent: UIEvent {readonly eigindi langur screenX; readonly eiginleiki langur skjárY; readonly eiginleiki langur clientX; readonly eiginleiki langur viðskiptavinur Y; readonly eigindi Boolean ctrlKey; readonly eigindi Boolean shiftKey; readonly eigindi Boolean altKey; readonly eigindi Boolean metaKey; readonly eigindi óundirritaðan stuttan hnapp; readonly eigindi EventTarget relatedTarget; ógilt initMouseEvent (...); };

Snertiviðburðir lengja nálgun músaviðburða. Sem slíkt miðla þeir a TouchEvent hlut sem er mjög svipaður og Músaviðburður, en með einum afgerandi mun: þar sem nútíma snertiskjár styðja almennt multi-snertiviðskipti TouchEvent hlutir innihalda ekki einstaka hnitareiginleika. Í staðinn eru hnitin aðskildir Snertilisti hlutir:

tengi TouchEvent: UIEvent {readonly eiginleiki TouchList snertir; readonly eiginleiki TouchList targetTouches; readonly eiginleiki TouchList breytti Snertir; readonly eigindi Boolean altKey; readonly eigindi Boolean metaKey; readonly eigindi Boolean ctrlKey; readonly eigindi Boolean shiftKey; };

Eins og við sjáum, a TouchEvent inniheldur þrjá mismunandi TouchList hluti:

• snertir: inniheldur alla snertipunkta sem eru virkir á skjánum eins og er, óháð því hvort það tengist beint þeim þætti sem við skráðum hlustunaraðgerðina fyrir.
• targetTouches: inniheldur aðeins snertipunkta sem byrjuðu yfir frumefnið okkar - jafnvel þó að notandinn færði fingurinn út fyrir frumefnið sjálft.
• breyttSnertum: inniheldur alla snertipunkta sem breyttust frá síðustu snertingaratburði.

Hvert þessara táknar fjölda einstaklinga Snertu hlutir. Hér finnum við hnitapörin eins og clientX og viðskiptavinur sem við erum á eftir:

tengi snerta {readonly attribute long auðkenni; skriflegt eigindi EventTarget miða; readonly eiginleiki langur skjárX; readonly eiginleiki langur skjárY; readonly eiginleiki langur clientX; readonly eiginleiki langur viðskiptavinur Y; readonly eiginleiki langur síðuX; readonly eiginleiki lang blaðsíða Y; };

Notkun snertiviðburða til að fylgjast með fingrum

Förum aftur að okkar striga-basað dæmi. Í fyrsta lagi verðum við að breyta hlustunaraðgerðinni þannig að hún bregst bæði við atburðum músar og snertingar. Í fyrsta lagi höfum við aðeins áhuga á að rekja hreyfingu eins snertipunkts sem er upprunninn á striganum okkar. Svo við grípum bara clientX og viðskiptavinur hnit frá fyrsta hlutnum í targetTouches fylki:

var posX, posY; aðgerðastaðaHandler (e) {if ((e.clientX) && (e.clientY)) {posX = e.clientX; posY = e.clientY; } annað ef (e.targetTouches) {posX = e.targetTouches [0] .clientX; posY = e.targetTouches [0] .clientY; e.preventDefault (); }} canvas.addEventListener (‘mousemove’, positionHandler, false); canvas.addEventListener (‘touchstart’, positionHandler, false); canvas.addEventListener (‘touchmove’, positionHandler, false);

Prófun á breyttu handriti (sjá dæmi6.html í kennsluskrám) á snertiskjátæki, sérðu að rekja einn fingur hreyfingu virkar nú áreiðanlega. Ef við viljum auka dæmi okkar til að vinna einnig fyrir multi-touch, verðum við að breyta upprunalegu nálguninni lítillega. Í staðinn fyrir eitt hnitapör munum við skoða heildar hnitasvið sem við munum vinna í lykkju. Þetta mun gera okkur kleift að fylgjast með einum músarbendlum sem og hvers konar fingurhreyfingum sem notandi gerir (sjá dæmi7.html í kennsluskrám):

var stig = []; aðgerðastaðaHandler (e) {if ((e.clientX) && (e.clientY)) {points [0] = e; } annað ef (e.targetTouches) {stig = e.targetTouches; e.preventDefault (); }} falllykkja () {... fyrir (var i = 0; ipoints.length; i ++) {/ * Teiknaðu hring á punkta [0] .clientX / stig [0] .clientY * / ...} }

Frammistöðusjónarmið

Eins og með mousemove atburðir, snerta hreyfingu getur skotið með miklum hraða við hvaða fingur sem er. Það er ráðlegt að forðast að framkvæma ákafan kóða, svo sem flókna útreikninga, eða jafnvel alla teikningaraðgerðir, fyrir hverja hreyfingaratburð. Þetta er mikilvægt fyrir eldri snertitæki sem eru minna afkastamikil. Í dæminu okkar gerum við alger lágmark með því einfaldlega að geyma nýjustu fylki músar eða snertipunkta hnit. Kóðinn til að endurteikna strigann okkar er keyrður sjálfstætt í sérstakri lykkju sem kallast via setInterval .

Ef fjöldi atburða sem handritið þitt þarf að vinna úr er enn of hátt, þá gæti verið þess virði að endurheimta eða þrengja þessa atburði frekar með lausnum eins og limit.js.

Niðurstaða

Þrátt fyrir að vafrar á snertifærum tækjum standi sjálfgefið að því að meðhöndla músasértækar forskriftir, þá eru samt aðstæður þar sem nauðsynlegt getur verið að laga kóðann okkar frekar fyrir snertiverkanir.

Í gegnum þessa kennsluverkefni höfum við skoðað grunnatriðin í því hvernig meðhöndla skal snertingaratburði í JavaScript. Vonandi hefur þessi kennsla gefið þér ágæta kynningu á því hvers vegna snertingarviðburðir eru nauðsynlegir, sem og grunnur til að byggja á því hvernig hægt er að nota þær til að láta vefsíður þínar og forrit virka vel á snertitækjum.

Orð: Patrick H Lauke

Þessi grein birtist upphaflega í netblaði 248.