在点击事件中取消绑定 preventDefault？

Question

我目前在创建移动导航时遇到问题。这是一个简单的汉堡包图标，当您单击它时，它会打开一个全屏菜单。问题是我试图在叠加层可见时禁用滚动。现在我想我可以通过添加来实现这一点；

$('body').bind('touchmove', function(e){e.preventDefault()});

这一次有效，但是当您再次关闭菜单时，preventDefault 仍然处于活动状态，我不知道如何解除绑定，因为汉堡包图标用于打开和关闭菜单。

我在下面添加了我使用的完整 js 脚本；

$(document).ready(function () {
  $(".icon").click(function () {
    $('body').bind('touchmove', function(e){e.preventDefault()}); 
    $(".mobilenav").fadeToggle(500);
    $(".top-menu").toggleClass("top-animate");
    $(".mid-menu").toggleClass("mid-animate");
    $(".bottom-menu").toggleClass("bottom-animate");
  }); 
});

感谢您的帮助！

Answer 1

很容易实现，使用.on()和.off()jQuery方法！

$(document).on('touchmove', 'body', function(e){e.preventDefault()});
$(document).off('touchmove', 'body', function(e){e.preventDefault()});

不过还有一个unbind()的功能！

$('body').unbind('touchmove', function(e){e.preventDefault()});

代码示例：

$(document).ready(function () {

  var cancelScroll = function(e) { e.preventDefault(); }

  $(".icon").click(function () {
    if ($(".mobilenav").is(":visible")) {
      $('body').unbind('touchmove', cancelScroll); 
    } else {
      $('body').bind('touchmove', cancelScroll); 
    }
    $(".mobilenav").fadeToggle(500);
    $(".top-menu").toggleClass("top-animate");
    $(".mid-menu").toggleClass("mid-animate");
    $(".bottom-menu").toggleClass("bottom-animate");
  }); 
});

注意： 从处理程序返回 false 等同于在事件对象上同时调用 .preventDefault() 和 .stopPropagation()。

所以它可能只是：

var cancelScroll = function() { return false; }

Answer 2

添加标志以在关闭时区分和解除绑定，

 $(document).ready(function () {
  var isClose = false;
  $(".icon").click(function () {

    if(isClose){
      $('body').unbind('touchmove', function(e){e.preventDefault()}); 
      isClose = false;
    }else{
      $('body').bind('touchmove', function(e){ e.preventDefault();});
      isClose = true; 
    }
    $(".mobilenav").fadeToggle(500);
    $(".top-menu").toggleClass("top-animate");
    $(".mid-menu").toggleClass("mid-animate");
    $(".bottom-menu").toggleClass("bottom-animate");
  }); 
});

在点击事件中取消绑定 preventDefault？

Unbinding preventDefault in click event?

javascript

mobile

jquery

scroll

nav