Tocca Emulazione evento con Chrome

Il touchscreen con funzionalità multi-touch ha rivoluzionato i dispositivi mobili come lo smartphone e il tablet, quindi aggiungere funzionalità multi-touch al nostro sito Web è una scelta pratica. Il problema che dobbiamo affrontare è che stiamo sviluppando siti Web su un desktop tradizionale senza funzionalità touchscreen. Quindi, come eseguiamo il debug di un evento Touch, se qualcosa non funziona?

Chrome ha reso il debug Touch possibile e più semplice sul desktop. Mentre tradizionalmente riempiamo il nostro sito web con eventi relativi al mouse - come click, click e mouseup - Google Chrome ci consente di emulare l'evento Touch senza l'uso di un dispositivo touchscreen.

Lascia che ti mostri come.

Toccare Emulazione

Ho creato una pagina demo con Modernizr collegato per vedere le funzionalità del browser. A questo punto, come puoi vedere nello screenshot seguente, Chrome per desktop non supporta Touch, che è indicato con la classe no-touch all'interno del body .

Chrome ha un'opzione per emulare l'evento / interazione Touch. Per farlo, apri Impostazione Strumenti per sviluppatori e vai alla scheda "Sostituisci" a sinistra.

Seleziona l'opzione "Emula eventi di tocco" e aggiorna la finestra.

Ora, se dai un'occhiata al nome della classe nel body, è cambiato in touch e il puntatore del mouse è diventato un cerchio. Mostra che Chrome supporta Touch.

Per testarlo, puoi aggiungere il seguente codice JavaScript nel tuo documento.

 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); 

Tieni il tuo clic e trascinalo intorno alla finestra, questo codice genererà la posizione del cursore. Puoi andare alla pagina demo per vederlo in azione.

• Visualizza la demo
• Scarica fonte

Inoltre, puoi anche testarlo con SwipeJS, un dispositivo di scorrimento mobile ottimizzato e scorrevole . Tieni premuto clic e trascinalo a destra e a sinistra nella demo Slider, la diapositiva dovrebbe seguire la posizione del cursore del mouse.

Conclusione

Quando si tratta di uno strumento per lo sviluppo web, Google Chrome, a mio parere, è molto più avanti rispetto ad altri browser. È pieno di strumenti per lo sviluppo moderno come l'Emulazione Touch - sebbene l'implementazione sia limitata a gesti con 1 dito, non 2 o più gesti (ancora).

Tieni inoltre presente che l'emulazione Touch verrà eliminata quando lo Strumento per gli sviluppatori viene chiuso.

Come creare la campagna Newsletter Email perfetta [Infografica]

Alla ricerca di suggerimenti su come è possibile produrre la campagna o la newsletter perfetta, una che viene aperta, recapita il messaggio nel modo giusto e aumenta le possibilità di ottenere una risposta? Ecco un'infografica che può aiutare a rispondere a queste domande e molto altro ancora.Gu

(Consigli tecnici e di design)

20 tendenze del Web design in crescita da tenere d'occhio nel 2017

È passato un altro anno e i designer guardano al futuro. Molte tendenze del design promettenti sono destinate a scoppiare nel 2017. L'anno scorso ho coperto le tendenze del design del 2016 e da allora abbiamo visto molti cambiamenti .Quindi, per questo post ho scelto le 20 migliori tendenze che ho notato guadagnando trazione nel 2017 .

(Consigli tecnici e di design)