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.

Opera Neon - Opera tar på seg fremtidige nettlesere

Nettlesere er ikke det mest interessante stykket programvare tilgjengelig, i betraktning at de fleste, om ikke alle av dem, er funksjonelt identiske med hverandre .Det ser imidlertid ut som at Opera ser ut til å utfordre vår oppfatning av nettleseren, ettersom firmaet har gitt ut en konseptbrowser kalt Opera Neon for alle å prøve ut.Hva

(Tekniske og design tips)

Kjør SQL-kode i nettleseren din med SQLPad

Utviklingen av skybaserte IDEer gjør det enkelt å kode fra hvor som helst. Med cloud IDEs kan du lære å bygge nettsteder uten noen kodende programvare i det hele tatt!Og med nettleserversjoner kan du til og med begynne å kjøre mer dynamiske koder som database SQL. Den gratis SQLPad webappen er et flott verktøy for alle som praktiserer SQL eller ofte teste kodestykker .For å

(Tekniske og design tips)