启用/禁用点击时的touchmove [英] Enabling/Disabling touchmove on click

问题描述

我目前正在建立一个具有非常简单的重叠效果的网站 - 我有一个'hamburger'（ .mobilemenu ）菜单图标，当单击切换伪类在我的导航叠加层（ .mobile-nav ）。我想添加一些代码，它也禁用 touchmove 在初始点击和当（ .mobilemenu ）被点击

这是我的代码，如下所示：

  jQuery（'。mobilemenu'）。click（function（e）{
 jQuery（this）.toggleClass（'is-active'）; 
 jQuery .toggleClass（'active'）; 
 
 
 e.preventDefault（）; 
}）; 
  

我尝试了以下操作：

  jQuery（'。mobilemenu'）。click（function（e）{
 jQuery（this）.toggleClass（'is-active'）; 
 jQuery -nav'）。toggleClass（'active'）; 
 if（'。mobile-nav'）。hasClass（'active'）{
 $（body）.on（'touchmove'，function e）{
 e.preventDefault（）; 
}}; 
 
 e.preventDefault（）; 
}）; 
  
 
 
 
这显然不起作用！
 
 
 
 Frankly JavaScript / JQuery我可以切换一个body类的触摸移动禁用或者我必须以某种方式重写代码并使用 bind ？
 
 
 
  EDIT：根据@John R的建议，我稍微修改了我的代码的语法 - a href =http://jsfiddle.net/jameshenry/xbgu406a =nofollow> JS fiddle  
 
 
 
我的代码现在看起来如下： 
  jQuery（'。mobilemenu'）click（function（e）{
 jQuery（this）.toggleClass '活跃'）; 
 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'））{等现在是正确的，可能不是？ 
 
 
 
  EDIT 2 ：所以经过一段时间的游戏，我更新了语法，叠加层再次工作，但我仍然可以滚动iPhone上重叠式广告后面的网页主体： http://jsfiddle.net/jameshenry/bzau0jaz/1/   - 如果有人有任何想法，我真的很感谢！
  jQuery（'。mobilemenu'）。 （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 （）} 
）}; 
}）; 
 
  EDIT 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 （'active'））{
 $（'body'）。on（'touchmove'，false）; 
}; 
 else {$（'body'）。on '，true）;}; 
}）; 
  
但这只是似乎停止了覆盖工作 - 有一种方法来切换'touchmove'当关闭？这是一个小调 http://jsfiddle.net/jameshenry/bzau0jaz/2/   p> 
 
解决方案
确定解决方案（经过大量的试验和错误，以及太多的时间花在这个！）真的很简单 - code> .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）; 
} 
 }）; 
  
如果任何人都可以看到这种方法的任何缺陷或方法来弥补它，那将是巨大的。似乎很好，但！
 
合作
I'm currently building a site with a really simple overlay effect - I have a 'hamburger' (.mobilemenu) menu icon, which when clicked toggles a pseudo class on my navigation overlay (.mobile-nav). I'm looking to add some code which also disables touchmove on the initial click and when (.mobilemenu) is clicked again, reinstates the default behaviour.

This is my code as it stands:
jQuery('.mobilemenu').click(function(e) {
    jQuery(this).toggleClass('is-active');
    jQuery('.mobile-nav').toggleClass('active');


    e.preventDefault();
});
I tried the following:
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();
});
This obviously isn't working!

Frankly Javascript/JQuery is quite new to me, so I'm sure the syntax is incorrect here. Could I potentially toggle a body class that has touch move disabled? Or do I have to somehow rewrite the code and use bind?

EDIT: On the suggestion of @John R I've changed the syntax of my code slightly - Here is a fiddle: JS fiddle 

My code now looks as follows:
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();
});
However this seems to have killed the overlay completely! I'm guessing that though the line if(jQuery('.mobile-nav').hasClass('active')) { etc. is now correct, the following bits might not be? 

EDIT 2: So after a bit of playing around I've updated the syntax, the overlay is again working but I can still scroll the body of the page behind the overlay on iPhone: http://jsfiddle.net/jameshenry/bzau0jaz/1/ - If anybody has any ideas I'd really appreciate that!
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()}
                  )};
});
EDIT 3: After playing around with the structure and syntax a little more I've finally got the 'touchmove, false' working when clicked. The only problem is it doesn't toggle so scrolling is permanently disabled! 
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);
    };
});
I'm thinking an Else statement is the way to go, but  I've tried adding the following:
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);};
});
But that just seems to stop the overlay working - is there a way to switch 'touchmove' back on when closed? Here is a fiddle http://jsfiddle.net/jameshenry/bzau0jaz/2/ 
解决方案
Ok the solution (after lots of trial and error and way too many hours spent on this!) is really simple - binding using .on() and unbinding via .off - Here is the final jQuery code:
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);
        }
});
If anyone can see any flaws in this approach or ways to neaten it up that would be great. Seems to be working nicely though!

                        
这篇关于启用/禁用点击时的touchmove的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！