香草javascript忽略第一个选项卡/单击

Question

我有一个幻灯片菜单使用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);
});

我添加了延迟的menubtn代码以在关闭和打开状态之间切换图标.

Answer 1

您所描述的行为可能是由以下原因引起的：

在你的 JS 中，你尝试为你的 nav 元素实现某种开关切换，区分leftCSS 属性值，-600表示off值和0表示on值。

正如您所说，在这些状态之间切换似乎工作正常，但是当您的元素未完全初始化时会发生什么-600？然后，在第一次点击时，您总是会遇到 else 子句并将其设置为-600第一个，在第一次点击时实际上不会显示任何视觉效果，正如您所描述的那样。

对于即时测试，只需交换 if-else 子句即可on在 style.left 不存在时将其翻转-600，然后可能会在您的状态之间实现更动态的区分；）