Vanilla javascript ignorując pierwszą kartę/kliknij

Mam slajd w menu przy użyciu javascript wanilii do użytku w telefonach, ale do tej pory wszystkie moje testy spowodowały, że przeglądarki mobilne ignorują pierwsze dotknięcie (wypróbowałem oba touchstart & kliknij jako zdarzenia) . Począwszy od drugiego dotknięcia działa pięknie z każdym następnym dotknięciem.Vanilla javascript ignorując pierwszą kartę/kliknij

Po otwarciu menu jest jedyną funkcją javascript na stronach, nie chcę załadować ogromnej biblioteki, chcę, aby była prosta i mała. Mój kod jest poniżej:

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

Jakiekolwiek sposoby na łatwe wyeliminowanie tej potrzeby za dwukrotne kliknięcie za pierwszym razem?

W dept fwiw jest to responsywny projekt, z menu nawigacji w kolumnie na dużych ekranach i slajdem na telefonach.

Edit: rozwiązać problem

po drodze na Matt Style komentować, próbowałem za pomocą classList.toggle i to rozwiązało problem. Ostateczna wersja jest poniżej:

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

dodałem opóźnionego kodu menubtn aby przełączać między państwami ikonę zamkniętych i otwartych.

Źródło

2015-12-14 Tom

Nie odpowiada to bezpośrednio na twoje pytanie, więc zostawię to jako komentarz, ale dlaczego nie używasz przycisku 'touchstart' do włączania i wyłączania klasy? [element.classlist.toggle] (http://caniuse.com/#feat=classlist) ma prawie wszechobecne wsparcie dla urządzeń dotykowych, chociaż jeśli reaguje na pracę na komputerze, to zdarzenie click jest prawdopodobnie bezpieczniejsze i jest zrozumiałe wszędzie, gdzie jest twój kod będzie działać. Poza tym element nav powinien znajdować się poza twoim zamknięciem, w ten sposób nie wysyłając zapytania do DOM z każdym zdarzeniem. –

@MattStyles - Próbowałem classList.toggle i działa jak urok. Dzieki za sugestie – Tom

opisać zachowanie może być spowodowane przez następujące:

w twojej JS spróbować wdrożyć jakąś ON-OFF przełącznik dla twojej nav elementu, zróżnicowanego na wartości nieruchomości left CSS, z -600 reprezentujących off wartość i 0 reprezentująca wartość on.

Tak jak powiedziałeś, przełączanie się między tymi stanami wydaje się działać dobrze, ale co się stanie, gdy twój element NIE zostanie zainicjowany dokładnie na -600? Następnie przy pierwszym dotknięciu zawsze wybierzesz pierwszą klauzulę i najpierw ustawisz ją na -600, skutecznie pokazując brak efektu wizualnego przy pierwszym dotknięciu, tak jak opisujesz.

na moment badania, po prostu zamienić if-else klauzuli wokół przekształcić go on gdy style.left nie jest -600 a następnie może pracować w kierunku bardziej dynamicznego różnicowania swoich państw;)

Źródło

2015-12-14 08:41:41 kasoban

myślę, że to ponieważ element.style.left jest pusty, nawet jeśli ustawiłeś właściwość left w arkuszu stylów. Zamiast tego możesz użyć elementu.offsetLeft. Please see here to how it works.

HTMLElement.style - MDN

Właściwość styl nie jest przydatna do nauki o stylu elementu w ogóle, ponieważ stanowi jedynie deklaracje CSS ustawione w atrybucie style inline elementu, a nie te, które pochodzą z zasadami stylu gdzie indziej , takie jak reguły stylu w sekcji <head> lub zewnętrzne arkusze stylów. Aby uzyskać wartości wszystkich właściwości CSS dla elementu, należy zamiast tego użyć window.getComputedStyle().

Źródło

2015-12-14 08:45:03

Vanilla javascript ignorując pierwszą kartę/kliknij

Odpowiedz

Powiązane problemy