Javascript 有条件地绑定/解除绑定事件侦听器

有了它的帮助，我可以通过切换链接或点击外部（通过鼠标）来创建一个菜单。问题在于，由于此mouseup事件处理程序绑定到文档对象，因此无论菜单是否打开，都会不断触发此事件

我想知道如何在菜单可见时才有条件地设置此处理程序？我不一定要调用：

$（document）.off（“mouseup”）

完全是因为此切换被触发以启动

$toggleMenu.on（“单击”，function（）{…}）

通过

$（文档）。on（“鼠标悬停”）

$（函数（）{
var$toggleMenu=$（“.toggleMenu”），
$menu=$（“.menu”）；
$toggleMenu.on（“单击”），功能（e）{
e、 预防默认值（）；
切换用户菜单（）；
});
$toggleMenu.on（“mouseup”，函数（e）{
e、 停止传播（）；
});
$（文档）.on（“mouseup”，函数（e）{
日志（“事件仍在触发”）；
if（！$menu.is（e.target）&&&$menu.has（e.target）.length==0）{
$menu.hide（）；
}
});
函数toggleUserMenu（）{
var menuisvisable=$menu.is（“：visible”）；
如果（菜单可见）{
$menu.hide（）；
}否则{
$menu.show（）；
}
}
});
。切换菜单{
颜色：#444；
显示：内联块；
边缘底部：15px；
文字装饰：无；
}
.菜单{
边框：1px纯黑；
显示：无；
}

我将移动您的
$（文档）。在（“鼠标悬停”）
上，将代码移动到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
处理程序。
我将移动您的
$（文档）。在（“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
处理程序，以允许通过单击“关闭菜单”关闭菜单

当菜单关闭时（通过单击“关闭菜单”或通过单击“切换”链接），
hideMenu
隐藏菜单并取消事件处理程序的设置，这样它就不会被进一步的
mouseup
事件调用

请注意，
mouseup
处理程序是从
.on（）
代码中分解出来的，因此
.off（）
只能引用和删除该处理程序——也就是说，如果存在其他
mouseup
处理程序，它们将保持不变


只能在显示菜单时附加事件处理程序，并在关闭菜单时取消附加事件处理程序

因此，每次显示菜单时，都会附加
mouseup
处理程序，以允许通过单击“关闭菜单”关闭菜单

当菜单关闭时（通过单击“关闭菜单”或通过单击“切换”链接），
hideMenu
隐藏菜单并取消事件处理程序的设置，这样它就不会被进一步的
mouseup
事件调用

请注意，
mouseup
处理程序是从
.on（）
代码中分解出来的，因此
.off（）
只能引用和删除该处理程序——也就是说，如果存在其他
mouseup
处理程序，它们将保持不变