javascript - 点击时启用/禁用触摸移动

Question

我目前正在构建一个具有非常简单的叠加效果的网站 - 我有一个“汉堡包”(.mobilemenu) 菜单图标，单击它会在我的导航叠加层上切换一个伪类 (.mobile-nav)。我正在寻找添加一些代码，这些代码也会在初始点击时禁用 touchmove，当再次点击 (.mobilemenu) 时，恢复默认行为。

这是我的代码:

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

这显然是行不通的!

坦率地说，Javascript/JQuery 对我来说很新，所以我确定这里的语法不正确。我可以切换禁用触摸移动的 body 类吗？还是我必须以某种方式重写代码并使用 bind？

编辑:根据@John R 的建议，我稍微更改了代码的语法 - 这是一个 fiddle :JS fiddle

我的代码现在如下所示:

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 上滚动叠加层后面的页面主体:http://jsfiddle.net/jameshenry/bzau0jaz/1/ -如果有人有任何想法，我将不胜感激!

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(jQuery('.mobile-nav').hasClass('active')) {
        $('body').on('touchmove', false);
    };
    else { $('body').on('touchmove', true);};
});

但这似乎只是停止了覆盖工作 - 有没有办法在关闭时重新打开“touchmove”？这是一个 fiddle http://jsfiddle.net/jameshenry/bzau0jaz/2/

Answer 1

改变这个

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

到

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