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.

Bloom maakt e-mailoptim in Beautiful & Less Intrusive [WordPress Plugin]

Disclaimer : dit bericht wordt u aangeboden door Elegant Thema's.Hier is het ding: uw eigen website is onderworpen aan dezelfde vicieuze jeuk als elke andere. Ik weet zeker dat je inhoud van hoge kwaliteit is en het ontwerp is onberispelijk. Maar laten we wel wezen, opt-in-formulieren zijn de virtuele verkopers die iedereen haat

(Technische en ontwerptips)

Creëer uw eigen Auto-Response Bot met Bottr

De meesten van ons herinneren zich het Microsoft Tay-incident waarbij internetgebruikers een AI-bot leerde in een paar dagen behoorlijk gekke woorden . Het is een grappig voorbeeld van bots op het web, maar je kunt je eigen Twitter- of FB-berichtenbot maken zonder de AI-dingen .Bottr is een gratis open- sourcebibliotheek voor het vanaf nul creëren van bots .

(Technische en ontwerptips)