將點擊事件綁定到除兩個之外的所有元素

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