我目前在使用我创建的移动导航时遇到问题。这是一个简单的汉堡包图标,当您单击它时,它会打开一个全屏菜单。问题是我试图在覆盖层可见时禁用滚动。现在我想我可以通过添加来实现这一点;
$('body').bind('touchmove', function(e){e.preventDefault()});
这有效一次,但是当您再次关闭菜单时,preventDefault 仍然处于事件状态,我不知道如何取消绑定(bind)它,因为汉堡包图标用于打开和关闭菜单。
我添加了下面使用的完整 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");
});
});
感谢您的帮助!
最佳答案
使用 .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; }
关于javascript - 在点击事件中取消绑定(bind)preventDefault?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45483276/