时间戳

首页 > 解决方案 > 无法移除 touchmove 事件监听器

javascript - 无法移除 touchmove 事件监听器

问题描述

我有这个 jquery 代码，我试图在用户单击汉堡包图标并且导航菜单一直下降时禁用滚动，并在他们关闭菜单时再次启用滚动。问题是，在移动版本中，我可以禁用滚动，但我不能再次启用它。即使关闭菜单，窗口也不会滚动。

http://www.ryo-o-jpn.com/

这是jquery代码。

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

    });

body 和 html 的 css 部分

html.toggle_bg, body.toggle_bg{
    overflow:hidden;
}

整个标题的 html 部分

<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>

标签： javascriptjquerywordpressaddeventlistenertouchmove

解决方案

这是因为您尝试删除的事件侦听器与您添加的事件侦听器不同——它们是完全不同的对象。（这是一个比这个问题更微妙的情况，因为您确实定义了一个变量来保存函数）。

问题是touchMove处理程序是在 click 处理程序内部定义的，因此每次单击时都会重新定义（作为不同的对象）.mobile-navigation-toggle。将它移到处理程序之外，它就可以工作了——现在它是您添加和删除的同一个全局处理程序。

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>

推荐阅读