單擊外部檢測器

您可以單擊開放的東西是合理的UX事物，然後不僅可以單擊相同的內容以關閉它，而且可以單擊其打開的內容以關閉它。 Kitty Giraudel只是為此寫了博客。訣竅是，一旦打開了東西，就可以將事件處理程序附加到窗口上，並用手錶進行事件（例如另一鍵單擊）。如果隨後的點擊未發生在新開放的區域內，請將其關閉。就像，字面上是東西。我認為這是一個不錯的技巧。

但是，有很多小事要考慮。例如：

我們必須停止在切換本身上點擊事件的傳播。否則，它將上窗口單擊“偵聽器”，並且由於菜單中的切換不包含在菜單中，因此一旦我們嘗試打開它，它將立即關閉後者。

對右。不能擁有那個，也可以打破整個事情。

我們在Codepen的許多地方都有相同的模式。像Kitty一樣，我們在React中實現了它。在窺視我們的實施時，我認為值得一提的是許多鐘聲和呼尾。例如，我們的不是功能或鉤子，而是我們使用的組件包裝器：

 <clickoutsidedetector onclickoutside="{（）="> {closethething（）; }}}
>
  菜單或模態之類的東西。
</clickoutsidedetector>

這樣，它是一個通用包裝器，我們可以在“戶外單擊”上用於任何東西。鐘聲和呼尾是：

• 您可以通過組件道具，以便它不必表現為
  ，但是無論您希望它在語義上是什麼。
• 如果目前正在積極聆聽事件，則偵聽道具使您可以切換。就像一種快速的方法來短路。
• ESC按鍵是相當於在外面單擊的功能。
• 處理觸摸事件以及點擊
• 處理單擊外部發生在
• 允許您傳遞元素以忽略，因此，我們可以針對不會觸發外部單擊的元素具體而不是貓咪記錄的止動技巧。

這麼多的小東西！對我來說，這是現實世界發展的完美小例子。您只想要一種小行為，最終需要處理很多考慮和邊緣案例，而且從未真正做過。在過去的幾個月中，我剛剛觸摸了我們的組件，因為我們使用了第三方工具，改變了他們做的事情，從而影響了頁面上使用的iframe。最終，我不得不觀看一個模糊的事件，然後檢查文檔的階級列表。激活者看看這是在外面吃點擊的東西！

Annnnyway，我在這裡拋出了我們的唯一笨拙的版本。

我從凱蒂（Kitty）的帖子中看到了一些我們沒有處理的東西，這是第一句話：

我們需要一種方法來關閉菜單，或者在其外部單擊菜單或從中刪除菜單。

強調我的。不用擔心，我現在的代碼中有一個待辦事項。