Question

我在手机上使用vanilla javascript进行了幻灯片放映，但到目前为止，我所有的测试都导致移动浏览器忽略了第一次点击（尝试了touchstart和amp; click as events）。从第二个水龙头开始，每次随后都可以很好地工作。

作为开放＆amp;关闭菜单是页面上唯一的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元素实现某种On-Off切换，区别于left CSS属性值，-600代表off值，{代表0值的{1}}。

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

对于即时测试，当style.left不是-600时，只需将if-else子句交换为on，然后可能会在状态之间进行更加动态的区分;）

Answer 2

我认为这是因为即使您在样式表中设置了element.style.left属性，left也是空的。您可以使用element.offsetLeft代替。 Please see here to how it works.

HTMLElement.style - MDN

style属性对于一般地学习元素的样式没有用，因为它只表示元素的内联样式属性中设置的CSS声明，而不是那些来自其他地方的样式规则的CSS声明。例如<head>部分中的样式规则或外部样式表。要获取元素的所有CSS属性的值，您应该使用window.getComputedStyle（）。

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

2 个答案: