Vanilla javascript ignorando la prima scheda/clicca

Ho una diapositiva nel menu usando vanilla javascript per l'uso sui telefoni, ma finora tutti i miei test hanno portato i browser mobili a ignorare il primo tocco (ho provato sia touchstart & clic come eventi) . A partire dal secondo tocco funziona magnificamente con ogni tocco successivo.Vanilla javascript ignorando la prima scheda/clicca

Come apertura & chiudere il menu è l'unica funzione javascript sulle pagine, non voglio caricare una libreria enorme, voglio mantenerla semplice e piccola. Il mio codice è qui sotto:

var b = document.getElementById('menubtn'); 
b.addEventListener('touchstart', function (e) { 
    var n = document.getElementById('nav'); 
    var ns = n.style.left; 
    if (ns == "-600px") { 
     n.style.left = "0px"; 
    } else { 
     n.style.left = "-600px"; 
    } 
    e.preventDefault(); 
});

Qualsiasi modo per eliminare facilmente questa necessità di fare doppio clic la prima volta?

Nel reparto informazioni, è un design reattivo, con il menu di navigazione in una colonna su grandi schermi e una diapositiva sui telefoni.

Edit: Risolto il problema

seguito attraverso su stili di Matt commentare, ho provato ad utilizzare classList.toggle ed è risolto il problema. La versione finale è al di sotto:

var b = document.getElementById('menubtn'); 
var n = document.getElementById('nav'); 
b.addEventListener('touchstart', function() { 
    n.classList.toggle('shwmenu'); 
    setTimeout(function() { 
     b.classList.toggle('shwmenu'); 
    }, 500); 
});

ho aggiunto il codice menubtn ritardato per commutare l'icona tra gli stati chiusi e aperti.

fonte

2015-12-14 Tom

Questo non risponde direttamente alla tua domanda quindi lo lascerò come commento, ma perché non stai usando il 'touchstart' per attivare e disattivare una classe? [elemento.classlist.toggle] (http://caniuse.com/#feat=classlist) ha un supporto quasi onnipresente per i dispositivi touch, anche se se risponde al lavoro anche su desktop, allora un evento click è probabilmente più sicuro ed è compreso ovunque il tuo codice correrà. Inoltre, il tuo elemento nav dovrebbe essere al di fuori della tua chiusura, in questo modo non devi interrogare il DOM con ogni evento. –

@ MattStyles - Ho provato il classList.toggle e funziona come un incantesimo. Grazie per il suggerimento – Tom

Il comportamento descritto potrebbe essere causato dal seguente:

Nei tuoi JS si tenta di attuare una sorta di ginocchiera On-Off per il vostro navigatore elemento, differenziato sul valore della proprietà left CSS, con -600 che rappresenta la Valore off e 0 rappresenta il valore on.

Come hai detto, la commutazione tra questi stati sembra funzionare correttamente, ma cosa succede quando il tuo elemento NON è inizializzato esattamente su -600? Quindi al tuo primo tocco ti imbatterai sempre nella tua clausola else e la imposterai a -600 prima, mostrando in effetti nessun effetto visivo al tuo primo tocco, proprio come descrivi.

Per un test immediato, basta scambiare la else if-clausola in giro per trasformarlo on quando style.left non è -600 e poi magari lavorare verso una differenziazione più dinamica tra i vostri stati;)

fonte

2015-12-14 08:41:41 kasoban

Penso che questo perché element.style.left è vuoto anche se è stata impostata la proprietà left nel foglio di stile. Puoi invece usare element.offsetLeft. Please see here to how it works.

HTMLElement.style - MDN

La proprietà di stile non è utile per conoscere lo stile dell'elemento in generale, in quanto rappresenta solo le dichiarazioni CSS impostate in attributo style inline dell'elemento, non quelli che provengono da regole di stile altrove , ad esempio le regole di stile nella sezione <head> o i fogli di stile esterni. Per ottenere i valori di tutte le proprietà CSS per un elemento, devi utilizzare invece window.getComputedStyle().

fonte

2015-12-14 08:45:03

Vanilla javascript ignorando la prima scheda/clicca

risposta

Problemi correlati