單擊外部元素 - JQuery

Question

我想了解當你點擊外面時如何隱藏元素。

這是一個來自：

https://css-tricks.com/dangers-stopping-event-propagation/

$(document).on('click', function(event) {
  if (!$(event.target).closest('#menucontainer').length) {
    // Hide the menus.
  }
});

有人可以幫我解決這個問題嗎？ 我不明白為什么我們需要使用length屬性？

最近的最近遍歷到DOM的頂部，從哪里開始，然后停止它到達頂部？

干杯

Answer 1

您需要檢查長度，因為jQuery查詢始終返回結果，如果未找到任何結果，則該結果為空。 檢查長度后，您可以判斷點擊是否在內部（長度> 0，找到了元素）或外部（長度=== 0，未找到任何元素）

Answer 2

這是一個細分：

第1行：$（文件）.on（'click'，function（event）{...}）;

綁定文檔中的任何單擊（DOM）。 使用你解除綁定（.off（'click'，.....）;使用它之后。否則它會在每次點擊時無休止地執行。

第2行：

if (!$(event.target).closest('#menucontainer').length) {

event.target ===（等於）在dom中單擊的元素。

.closest（'＃menucontainer'）=通過測試元素本身並遍歷DOM樹中的祖先來獲取與選擇器匹配的第一個元素。 含義：當在 MenuContainer中單擊時，它將返回一個帶有第一個'#menucontainer'元素的數組。 當MenuContainer 外部單擊時，它將返回一個Empty數組。 （沒有找到任何元素）。

.length = JQuery的默認行為是在找不到任何內容時返回一個空數組。 如果在If語句中放入並清空數組，它將返回true。 因為它是一個定義的對象。 它被定義為一個數組。 但數字0 == false。 他們把.length放在陣列上。 當它找到一個元素時，當它為空時> 0（真），它將返回0（假）。

在JavaScript中，一切都是'truthy'或'falsy'，而數字0（和NaN）意味着錯誤，其他一切都是真的。

檢查NickG他的鏈接（ jQuery是否存在“存在”功能？ ）

Answer 3

jQuery選擇器將返回包含所有匹配元素的數組。 如果您使用ID作為選擇器，例如('#menucontainer')則長度將為0或1.如果我們單擊菜單外的某些內容，則無法找到最近的菜單，否定將為true並且菜單可以隱藏。

 // Get the current clicked element
!$(event.target)
// Get closest container with this id, bubbling up the DOM
.closest('#menucontainer')
// returns 1 if we clicked something inside the menu and 0 if we clicked something outsite
.length