Tik op Evenementemulatie met Chrome

Touchscreen met multi-touch-functies hebben een revolutie teweeggebracht in mobiele apparaten zoals de smartphone en de tablet, dus het toevoegen van multi-touch mogelijkheden aan onze website is een praktische keuze. Het probleem waarmee we worden geconfronteerd, is dat we websites ontwikkelen op een traditionele desktop zonder touchscreenmogelijkheden. Dus, hoe debuggen we een Touch-evenement, als er iets mis mee is?

Chrome heeft debugging Touch mogelijk en gemakkelijker gemaakt op de desktop. Hoewel we van oudsher onze website vullen met aan muizen gerelateerde gebeurtenissen - zoals click, mouseup en mousedown - stelt Google Chrome ons in staat om Touch-gebeurtenissen te emuleren zonder een touchscreen-apparaat te gebruiken.

Ik zal je laten zien hoe.

Tik op Emulatie

Ik heb een demopagina met Modernizr-koppeling gemaakt om de browserfuncties te zien. Zoals u in de volgende schermafbeelding kunt zien, ondersteunt Chrome voor desktops niet Touch, wat wordt aangegeven met de ' no-touch klasse in de body .

Chrome heeft een optie om Touch-gebeurtenis / interactie te emuleren. Open hiervoor Instellingen ontwikkelaarstools en ga links naar het tabblad "Negeren".

Selecteer de optie 'Touch-gebeurtenissen emuleren' en vernieuw het venster.

Nu, als je de klassenaam in de body bekijkt, veranderde het in touch en veranderde de muisaanwijzer in een cirkel. Hieruit blijkt dat Chrome Touch ondersteunt.

Om het te testen, kunt u het volgende JavaScript in uw document toevoegen.

 var obj = document.getElementById ('toucharea'); obj.addEventListener ('touchmove', function (event) {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';}}, false); 

Houd uw klik vast en sleep het rond het venster, deze code genereert de cursorpositie. U kunt naar de demopagina gaan om deze in actie te zien.

• Demo bekijken
• Download de bron

Bovendien kunt u het ook testen met SwipeJS - een voor mobiel geoptimaliseerde en wisbare beeldschuifregelaar . Houd de muisknop ingedrukt en sleep hem naar rechts en links op de Slider-demo, de dia moet de positie van je muiscursor volgen.

Conclusie

Als het gaat om tool voor webontwikkeling, komt Google Chrome naar mijn mening een aantal stappen vooruit van andere browsers. Het zit vol met tools voor moderne ontwikkeling zoals Touch Emulation - hoewel de implementatie beperkt is tot 1-vingerige gebaren, nog geen 2 of meer gebaren.

Houd er ook rekening mee dat de Touch-emulatie wordt verwijderd wanneer de ontwikkelaarshulpmiddel is gesloten.

50 mobiele aanmeldings- en aanmeldingsformulieren voor uw inspiratie

Net als aanmeldingsformulieren voor een nieuwsbrief, worden mobiele apps tegenwoordig overspoeld met aanmeldingsformulieren waarin wordt gevraagd om gegevens in verschillende stadia in te voeren . Van online winkelen en e-commerce tot games en entertainment, gebruikersgegevens zijn vaak van groot belang voor de app-eigenaren

(Technische en ontwerptips)

Prachtige vuile autokunst die je moet zien

Het eerste instinct van een gemiddelde persoon als ze een echt vuile auto zien, is om hem gewassen te krijgen, toch? Wel, Scott Wade is niet jouw gemiddelde persoon. Hij staat bekend als de "The Dirty Car Artist." Ja, hij kijkt naar een vuile auto en maakt er geweldige kunstwerken op . Hij maakt niet alleen de prachtige schilderijen van oude meesters opnieuw, maar hij doet ook zijn eigen originele werk, die net zo indrukwekkend zijn

(Technische en ontwerptips)