Javascript 启用/禁用touchmove on click

我目前正在构建一个具有非常简单的覆盖效果的网站-我有一个“汉堡包”（

.mobileemu

）菜单图标，单击该图标可在我的导航覆盖上切换一个伪类（

.mobile nav

）。我希望添加一些代码，在初次单击时禁用

touchmove

，当再次单击（

.mobileNu

）时，恢复默认行为

这是我目前的代码：

jQuery('.mobilemenu').click(function(e) {
    jQuery(this).toggleClass('is-active');
    jQuery('.mobile-nav').toggleClass('active');


    e.preventDefault();
});

我尝试了以下方法：

jQuery('.mobilemenu').click(function(e) {
    jQuery(this).toggleClass('is-active');
    jQuery('.mobile-nav').toggleClass('active');
    if('.mobile-nav').hasClass('active') {
        $(body).on('touchmove', function(e) {
        e.preventDefault();
        }};

    e.preventDefault();
});

jQuery('.mobilemenu').click(function(e) {
    jQuery(this).toggleClass('is-active');
    jQuery('.mobile-nav').toggleClass('active');

    if(jQuery('.mobile-nav').hasClass('active')) {
        $('body').on('touchmove', false);
    };
    else { $('body').on('touchmove', true);};
});

这显然不起作用

坦率地说，Javascript/JQuery对我来说是相当新的，所以我确信这里的语法是不正确的。我是否可以切换禁用了触动移动的body类？或者我必须以某种方式重写代码并使用

bind

编辑：根据@John R的建议，我稍微修改了代码的语法-这里有一个小问题：

我的代码现在如下所示：

jQuery('.mobilemenu').click(function(e) {
  jQuery(this).toggleClass('is-active');
   jQuery('.mobile-nav').toggleClass('active');
     if(jQuery('.mobile-nav').hasClass('active')) {
     $(body).on('touchmove', function(e) {
     e.preventDefault();
  }};

e.preventDefault();
});

然而，这似乎已经完全扼杀了覆盖层！我猜，虽然现在行

if（jQuery（'.mobile nav'）.hasClass（'active'））{

是正确的，但下面的位可能不正确

编辑2：因此，在我更新了语法之后，覆盖层再次工作，但我仍然可以在iPhone上的覆盖层后面滚动页面主体：-如果有人有任何想法，我将非常感谢

jQuery('.mobilemenu').click(function(e) {
    jQuery(this).toggleClass('is-active');
    jQuery('.mobile-nav').toggleClass('active');

    if(jQuery('.mobile-nav').hasClass('active')) {
        $(body).on('touchmove', function(e){
            e.preventDefault()}
                  )};
});

编辑3：在对结构和语法进行了一点修改后，我终于在单击时使用了“touchmove，false”。唯一的问题是它没有切换，因此滚动被永久禁用

jQuery('.mobilemenu').click(function(e) {
    jQuery(this).toggleClass('is-active');
    jQuery('.mobile-nav').toggleClass('active');

    if(jQuery('.mobile-nav').hasClass('active')) {
        $('body').on('touchmove', false);
    };
});

我认为Else语句是一种方法，但我尝试添加以下内容：

jQuery('.mobilemenu').click(function(e) {
    jQuery(this).toggleClass('is-active');
    jQuery('.mobile-nav').toggleClass('active');
    if('.mobile-nav').hasClass('active') {
        $(body).on('touchmove', function(e) {
        e.preventDefault();
        }};

    e.preventDefault();
});

jQuery('.mobilemenu').click(function(e) {
    jQuery(this).toggleClass('is-active');
    jQuery('.mobile-nav').toggleClass('active');

    if(jQuery('.mobile-nav').hasClass('active')) {
        $('body').on('touchmove', false);
    };
    else { $('body').on('touchmove', true);};
});

但这似乎只是停止了覆盖层的工作-有没有办法在关闭时重新打开“触摸移动”功能？这里有一个小提琴更改此设置

if('.mobile-nav').hasClass('active'){
  //...
}

到

不要忘记在jQuery中的所有元素选择之前使用$或“jQuery”…要使If语句起作用，它需要

if (true) { ...something };

那你呢 jQuery（'.mobile nav'）.hasClass（'active'）==true

所以你需要把它封装在括号里，所以

jQuery（'.mobile nav'）.hasClass（'active'）

需要在括号中

if(jQuery('.mobile-nav').hasClass('active')){
    //doSomething
}

好的，解决方案（经过大量的尝试和错误，花费了太多的时间！）非常简单-使用

.on（）

绑定并通过

.off

解除绑定-以下是最终的jQuery代码：

jQuery('.mobilemenu').click(function(e) {
    jQuery(this).toggleClass('is-active');
    jQuery('.mobile-nav').toggleClass('active');
        if(jQuery('.mobile-nav').hasClass('active')) {
            $('body').on('touchmove', false);
        } else  {
            $('body').off('touchmove', false);
        }
});

---

如果有人能看到这种方法中的任何缺陷或解决方法，那就太好了。不过似乎工作得很好！

纠正John R提到的语法。还可以尝试css

指针事件：无

声明一个具有样式和切换条件的类..在现代浏览器上受支持。对于IE 9浏览器，Javascript是唯一的方法..我已经按照你的建议修改了代码，但我认为我仍然在某个地方出错，因为我的覆盖现在根本不起作用-我把它放到了一个小提琴中：我的代码如下：

jQuery（'.mobileemu'）。单击（函数（e）{jQuery（this）。toggleClass（'is-active'）；jQuery（'.mobile-nav'）。toggleClass（'active'）；如果（jQuery（'.mobile nav'）.hasClass（'active'））{$（body）.on（'touchmove'，函数（e）{e.preventDefault（）；}}；e.preventDefault（）；}）；

已用正确语法更新，但仍无法正常工作-