将点击事件绑定到除两个之外的所有元素

Question

我有一个菜单和一个按钮来切换这个菜单：

<a id="openMenu" onclick="openMenu()">Menu</a>
<div class="menu">..menu stuff..</div>

现在我想在整个<body>上绑定一个点击事件，除了两个描述的元素。 单击事件是，当<menu>可见并且用户单击<body>内的任何位置时， <menu>应该再次关闭。

我有以下代码：

 var menuComponents = $(".menu, #openMenu").children(); $("body").not(menuComponents).on("mousedown", function (event) { if ($(".menu").attr("active") == "true") { setActive(".menu"); } });

但是现在当menu打开时，我单击<a id="openMenu"...>按钮再次关闭menu ，它被关闭并立即再次打开。 那么，是否可以从正文中排除menu和openMenu按钮？

是否有任何提示说明为什么会出现这种行为？

Answer 1

如果单击的元素（ e.target ）是链接.toggle()菜单，则将侦听器添加到body - 否则任何其他单击将默认关闭菜单。

顺便说一句，有些事情你不应该做（特别是如果你使用 jQuery）。

内联事件处理程序是垃圾，所以不要使用它们。
#id只会妨碍您更新和扩展代码的能力，因此请使用类。 有几次可能需要#id ，但在目前的情况下不需要。
```
 <a /*id*/="useClassNotID" /*onclick="DoNotUse(this)"*/>Menu</a>
```

 $(document).click(function(e) { if ($(e.target).is('.openMenu')) { $('.menu').toggle({ duration: 500 }); } else { $('.menu').hide({ duration: 500 }); } });

 <a href='#' class="openMenu">Menu</a> <section class="menu"> <ul> <li><a href='#'>Link</a></li> <li><a href='#'>Link</a></li> <li><a href='#'>Link</a></li> <li><a href='#'>Link</a></li> <li><a href='#'>Link</a></li> </ul> </section> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

将点击事件绑定到除两个之外的所有元素

问题描述

1 个解决方案

解决方案1
0 2022-01-18 23:32:00

将点击事件绑定到除两个之外的所有元素

问题描述

1 个解决方案

解决方案1 0 2022-01-18 23:32:00

解决方案1
0 2022-01-18 23:32:00