no.hideout-lastation.com
Paradis For Designere Og Utviklere


Trykk på hendelsesemulering med Chrome

Touchscreen med multi-touch-funksjoner har revolusjonert mobile enheter som smarttelefonen og nettbrettet, slik at du kan legge til flere berøringsfunksjoner på nettstedet vårt, et praktisk valg. Problemet vi står overfor med dette er at vi utvikler nettsteder på et tradisjonelt skrivebord som ikke har touchscreen-mulighet. Så, hvordan feiler vi en Touch-hendelse, hvis noe er galt med det?

Chrome har gjort debugging Touch mulig og lettere på skrivebordet. Mens vi tradisjonelt fyller nettstedet vårt med mouseup hendelser - for eksempel click, mouseup og mousedown - lar Google Chrome oss etterligne Touch-hendelsen uten bruk av en berøringsskjerm.

La meg vise deg hvordan.

Trykk på emulering

Jeg har opprettet en demoside med Modernizr knyttet til å se nettleserfunksjonene. På dette tidspunktet, som du kan se i følgende skjermdump, støtter Chrome for skrivebordet ikke Touch, som er angitt med no-touch klassen i body .

Chrome har et alternativ til å etterligne berøringshendelse / samhandling. For å gjøre dette, åpne verktøysettinnstillingene, og gå til kategorien "Overstyr" til venstre.

Velg alternativet "Emuler berøringshendelser", og oppdater vinduet.

Nå, hvis du ser på klassenavnet i body, endret det for å touch, og musepekeren ble til sirkel. Det viser at Chrome støtter Touch.

For å teste det, kan du legge til følgende JavaScript i dokumentet.

 var obj = document.getElementById ('toucharea'); obj.addEventListener ('touchmove', funksjon (hendelse) {if (event.targetTouches.length == 1) {var touch = event.targetTouches [0]; var x = document.getElementById ('pagex'); var y = document.getElementById ('pagey'); x.textContent = touch.pageX + 'px'; y.textContent = touch.pageY + 'px';}}, falskt); 

Hold ditt klikk, og dra det rundt i vinduet, denne koden vil generere markørposisjonen. Du kan gå til demo siden for å se den i aksjon.

  • Se demo
  • Last ned kilde

I tillegg kan du også teste den med SwipeJS - en mobiloptimalisert og skyvebar bildeskli . Hold deg, klikk og dra den til høyre og venstre på Slider-demoen, lysbildet skal følge musemarkørposisjonen.

Konklusjon

Når det gjelder verktøy for webutvikling, er Google Chrome, etter min mening, flere skritt fremover fra andre nettlesere. Den er fullpakket med verktøy for moderne utvikling som Touch Emulation - selv om implementeringen er begrenset til 1-fingerbevegelser, ikke 2 eller flere bevegelser (ennå).

Vær også oppmerksom på at Touch-emuleringen vil bli kassert når utviklerverktøyet er stengt.

Slik animerer du en stiplede kant med CSS

Slik animerer du en stiplede kant med CSS

Dekorert grenser kan pryde ethvert element på siden, men CSS-grenser er begrensede når det gjelder stil. Utviklere møter ofte løsninger som CSS-gradientgrenser, SVG-grenser, flere grenser og mer for å etterligne og oppgradere utseendet på boksgrenser og dets animasjoner.I dag ser vi på en enklere hack for stiplede grenser: strekket grenseanimasjon. Den a

(Tekniske og design tips)

10 Verktøy for å beskytte datamaskinen mot infiserte USB-minnepinner

10 Verktøy for å beskytte datamaskinen mot infiserte USB-minnepinner

Vi bruker det med jevne mellomrom; det hjelper oss med å overføre filer fra skrivebordet til / fra bærbare datamaskiner eller dele innholdet med våre jevnaldrende. Det gjør livet enklere. Men vent, har du oversett sin trussel mot datamaskinen vår?Hvis USB-flash-stasjonen er infisert med virus, kan du ikke bare miste data i lagringsplassen, det berører også sikkerheten til hver datamaskin når den er plugget inn. Følgend

(Tekniske og design tips)