Ванильный javascript игнорирует первую вкладку/клик

У меня есть слайд в меню с использованием vanilla javascript для использования на телефонах, но до сих пор все мои тесты привели к тому, что мобильные браузеры игнорировали первый ответкитель (попробовали оба touchstart и щелкнули как события). Начиная со второго крана, он прекрасно работает с каждым последующим нажатием.

Как открытие и закрытие меню является единственной функцией javascript на страницах, я не хочу загружать огромную библиотеку, я хочу сохранить ее простой и малой. Мой код ниже:

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

Любые способы легко устранить эту необходимость двойного щелчка в первый раз?

В отделе fwiw это отзывчивый дизайн с навигационным меню в столбце на больших экранах и слайдом на телефонах.

Изменить: разрешил проблему

Пройдя через комментарий Matt Styles, я попытался использовать classList.toggle, и он решил проблему. Окончательная версия приведена ниже:

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

Я добавил задержанный код menuttn для переключения значка между закрытыми и открытыми состояниями.

Ответы

Ответ 1

Поведение, которое вы описываете, может быть вызвано следующим:

В вашем JS вы пытаетесь реализовать какой-то переключатель On-Off для своего элемента nav, дифференцированный по значению свойства left CSS, с -600, представляющим значение off и 0, представляющее on значение.

Как вы сказали, переключение между этими состояниями, кажется, работает нормально, но что происходит, когда ваш элемент НЕ инициализируется точно -600? Затем при первом касании вы всегда будете работать в своем предложении else и сначала установите его на -600, не оказывая эффективного эффекта на ваш первый щелчок, как вы описали.

Для мгновенного теста просто поменяйте предложение if-else, чтобы включить его on, когда style.left не -600, а затем, возможно, будет работать в направлении более динамического дифференцирования между вашими состояниями;)

Ответ 2

Я думаю, это потому, что element.style.left пуст, даже если вы установили свойство left в таблицу стилей. Вместо этого вы можете использовать element.offsetLeft. См. здесь, как это работает.

HTMLElement.style - MDN

Свойство style не полезно для изучения стиля элемента в целом, поскольку оно представляет только объявления CSS, установленные в атрибуте стиля inline, а не те, которые исходят из правил стиля в другом месте, например правила стиля в <head> или внешние таблицы стилей. Чтобы получить значения всех свойств CSS для элемента, вы должны использовать window.getComputedStyle().