解除绑定防止点击事件中的默认值?

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