javascript - 有条件地绑定(bind)/取消绑定(bind)事件监听器

Question

借助这个post我能够组合一个菜单，通过切换链接或单击链接外部(通过鼠标向上)来关闭该菜单。问题在于，由于此 mouseup 事件处理程序绑定(bind)到文档对象，因此无论菜单是否打开，都会不断触发该事件处理程序。

我想知道如何仅在菜单可见时有条件地设置此处理程序？我不一定想直接调用: $(document).off("mouseup"); ，因为这个切换曾经被触发以启动 $toggleMenu.on( “click”, function() {...}) 通过 $(document).on("mouseup")

$(function() {
  var $toggleMenu = $(".toggle-menu"),
      $menu = $(".menu");

  $toggleMenu.on("click", function(e) {
    e.preventDefault();

    toggleUserMenu();
  });

  $toggleMenu.on("mouseup", function(e) {
    e.stopPropagation();
  });

  $(document).on("mouseup", function (e) {
    console.log("Event is still firing");

    if (!$menu.is(e.target) && $menu.has(e.target).length === 0) {
      $menu.hide();
    }
  });

  function toggleUserMenu() {
    var menuIsVisible = $menu.is(":visible");
    
    if (menuIsVisible) {
      $menu.hide();
    } else {
      $menu.show();
    }
  }
});

.toggle-menu {
  color: #444;
  display: inline-block;
  margin-bottom: 15px;
  text-decoration: none;
}

.menu {
  border: 1px solid black;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="" class="toggle-menu">Toggle Menu</a>

<div class="menu">
  <a href="#" class="menu-item">Menu Item 1</a>
  <a href="#" class="menu-item">Menu Item 2</a>
  <a href="#" class="menu-item">Menu Item 3</a>
</div>

Answer 1

我会移动你的$(document).on("mouseup")像这样的toggleUserMenu代码:

  function toggleUserMenu() {
    var menuIsVisible = $menu.is(":visible");

    if (menuIsVisible) {
      $menu.hide();
      $(document).off("mouseup.my-menu");
    } else {
      $menu.show();
      $(document).on("mouseup.my-menu", function (e) {... });
    }

注意，我使用带有命名空间的事件来避免出现 $(document).off("mouseup"); 的情况。将取消订阅所有mouseup处理程序。