I have this jquery code, where I'm trying to disable scrolling when the users click on the hamburger icon and the navigation menu drops all the way down, and enable scrolling again when they close the menu. The problem is that, in mobile version, I can disable scrolling but I can't enable it again. Even after you close the menu, the window won't scroll.
Here is the jquery code.
jQuery('.mobile-navigation-toggle').on("click", function() {
$('html').toggleClass('toggle_bg');
$('body').toggleClass('toggle_bg');
jQuery('.mobile_menu_wrapper').slideToggle(300);
var touchMove = function(e){
e.preventDefault();
};
if($(this).hasClass('is-active')){
$(this).removeClass('is-active');
window.removeEventListener( 'touchmove' , touchMove);
} else {
$(this).addClass('is-active');
window.addEventListener( 'touchmove' , touchMove , { passive: false } );
}
});
The css part for body and html
html.toggle_bg, body.toggle_bg{
overflow:hidden;
}
The html part for the whole header
<div class="main_header">
<div class="header_parent_wrap" style="opacity: 1;">
<header>
<div class="logo_sect" data-height="85" style="height: 85px;">
<a class="logo" href="http://www.ryo-o-jpn.com/"><!-- Logo -->
<img alt="" height="85" src="http://www.ryo-o-jpn.com/wp-content/uploads/2019/08/ryookada-2.png" width="105"></a>
</div>
<div class="fright">
<nav class="menu-menu-container">
<ul class="menu" id="menu-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-302 current_page_item menu-item-305 parent-menu-1" id="menu-item-305">
<a href="http://www.ryo-o-jpn.com/">Home</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-328 parent-menu-2" id="menu-item-328">
<a href="http://www.ryo-o-jpn.com/about/">ABOUT</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-388 parent-menu-3" id="menu-item-388">
<a href="http://www.ryo-o-jpn.com/work/">WORK</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-341 parent-menu-4" id="menu-item-341">
<a href="http://www.ryo-o-jpn.com/contact/">CONTACT</a>
</li>
</ul>
</nav><!-- top_search -->
<div class="top_search">
<form action="http://www.ryo-o-jpn.com/" id="search_form" method="get" name="search_form">
<input class="ct-search-input" name="s" placeholder="To search type and hit Enter" type="text" value=""> <input class="s_submit" type="submit" value="Search"> <span class="top-icon-search"></span>
</form>
</div><!-- //top_search -->
<div class="clear"></div>
</div>
<div class="clear"></div>
</header>
<div class="mobile-navigation-toggle">
<div class="toggle-box">
<div class="toggle-inner"></div>
</div>
</div>
</div>
</div>
This is because the event listener you are trying to remove is not the same one as the one you added -- they are completely different objects. (This is a slightly more subtle case than this question, because you do define a variable to hold the function).
The problem is that the touchMove handler is defined inside the click handler, and therefore will be redefined (as a different object) every time you click .mobile-navigation-toggle. Move it outside the handler and it works -- now it is the same, global handler you add and remove.
var touchMove = function(e) {
console.log('touchMove handler active!');
e.preventDefault();
};
jQuery('.mobile-navigation-toggle').on("click", function() {
$('html').toggleClass('toggle_bg');
$('body').toggleClass('toggle_bg');
jQuery('.mobile_menu_wrapper').slideToggle(300);
if ($(this).hasClass('is-active')) {
$(this).removeClass('is-active');
console.log('removing handler');
window.removeEventListener('touchmove', touchMove);
} else {
$(this).addClass('is-active');
console.log('adding handler');
window.addEventListener('touchmove', touchMove, {
passive: false
});
}
});html.toggle_bg,
body.toggle_bg {
overflow: hidden;
}
.mobile-navigation-toggle {
background-color: lightgrey;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main_header">
<div class="header_parent_wrap" style="opacity: 1;">
<header>
<div class="logo_sect" data-height="85" style="height: 85px;">
<a class="logo" href="http://www.ryo-o-jpn.com/">
<!-- Logo -->
<img alt="" height="85" src="http://www.ryo-o-jpn.com/wp-content/uploads/2019/08/ryookada-2.png" width="105"></a>
</div>
<div class="fright">
<nav class="menu-menu-container">
<ul class="menu" id="menu-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-302 current_page_item menu-item-305 parent-menu-1" id="menu-item-305">
<a href="http://www.ryo-o-jpn.com/">Home</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-328 parent-menu-2" id="menu-item-328">
<a href="http://www.ryo-o-jpn.com/about/">ABOUT</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-388 parent-menu-3" id="menu-item-388">
<a href="http://www.ryo-o-jpn.com/work/">WORK</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-341 parent-menu-4" id="menu-item-341">
<a href="http://www.ryo-o-jpn.com/contact/">CONTACT</a>
</li>
</ul>
</nav>
<!-- top_search -->
<div class="top_search">
<form action="http://www.ryo-o-jpn.com/" id="search_form" method="get" name="search_form">
<input class="ct-search-input" name="s" placeholder="To search type and hit Enter" type="text" value=""> <input class="s_submit" type="submit" value="Search"> <span class="top-icon-search"></span>
</form>
</div>
<!-- //top_search -->
<div class="clear"></div>
</div>
<div class="clear"></div>
</header>
<div class="mobile-navigation-toggle">
<div class="toggle-box">
<div class="toggle-inner">Click here to toggle touchMove handler</div>
</div>
</div>
</div>
</div>