启用/禁用touchmove点击

我目前正在建立一个非常简单的覆盖效果的网站 - 我有一个'汉堡'（.mobilemenu）菜单图标，当点击切换我的导航覆盖图上的伪类时（.mobile-nav）。我正在寻找添加一些代码，这些代码还会在初始点击时禁用touchmove，并且当再次单击（.mobilemenu）时，将恢复默认行为。启用/禁用touchmove点击

这是我的代码，因为它代表：

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对我来说很新，所以我确信这里的语法不正确。我是否可以切换触摸移动被禁用的主体类？或者我必须以某种方式重写代码并使用bind？

编辑：在@约翰R的建议，我已经改变了我的代码的语法稍有 - 这是一个小提琴：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，假”点击后工作。唯一的问题是它不切换，所以滚动永久禁用！

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”？这里是一个小提琴http://jsfiddle.net/jameshenry/bzau0jaz/2/

来源

2015-10-19 hj8ag

更正您的语法，如John R.所述，并尝试使用css'Pointer-events：none'声明具有样式和切换条件的类。 https://css-tricks.com/almanac/properties/p/pointer-events/。在现代浏览器上支持。对于IE 9浏览器，Javascript是唯一的方法。 – Nirus

好的解决方案（后大量的试验和错误，以及花费太多的时间在这方面！）真的很简单 - 绑定使用.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); 
     } 
});

如果任何人都能看到这种方法的任何缺陷或将它整合起来的方式，那将是很棒的。似乎很好地工作！

来源

2015-10-20 08:35:20 hj8ag

更改此

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

要

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

来源

2015-10-19 11:57:36

我已经根据您的建议修改了代码，但是我认为我仍然在某处出错，因为我的覆盖现在根本无法工作 - 我已将它放到了一个小提琴：http://jsfiddle.net/jameshenry/xbgu406a/ 我的代码如下： 'jQuery（'。mobilemenu'）。click（function（e）{0} {0} {0}主动'）; jQuery（'。mobile-nav'）。toggleClass（'active'）; if（jQuery（'。mobile-nav'）。hasClass（'active'））{ $（body）.on （'touchmove'，function（e）{ e.preventDefault（）; }}; e.preventDefault（）; }）;' – hj8ag

jQuery中的所有元素选择此之前不要忘$或 “jQuery的” ...使IF语句工作，它需要

if (true) { ...something };

所以对于你的jQuery（”。移动-N AV“）。hasClass（ '活动'）===真

，所以你需要将其封装在括号中，所以

jQuery('.mobile-nav').hasClass('active') 需要在括号...

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

来源

2015-10-19 12:54:34 Alireza

Update d使用正确的语法，但仍然不能运行--http：//jsfiddle.net/jameshenry/bzau0jaz/1 – hj8ag

启用/禁用touchmove点击

回答

相关问题