使用長度屬性來獲取事件目標的困惑

Question

因此，我正在通過這個article關於使用停止事件傳播時的危險。在它被描述自己能做什麼，而不是使用stopPropagation該節還有，這個代碼所示：

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

我沒拿到這裏就是爲什麼length屬性在語句中使用？不是closest足以確定點擊的元素是否是事件目標？

Answer 1

因爲.closest()總是返回一個jQuery對象，所以如果只是檢查返回值.closest它永遠不會滿足條件。

相反，jQuery對象的length屬性將返回由它引用的dom元素的數量，因此爲了檢查最接近的元素是否找到了e.target的祖先樹中的目標元素，我們可以檢查length屬性。如果沒有找到匹配的元素length將是0，否則，將有引用的數量發現

Answer 2

這是一個經常使用的「黑客」（我可以說成語代替，如此普遍）。通過依賴JavaScript對象的truthy-falsy屬性，而不是檢查數組的大小是否大於零，可以縮短代碼。

if (array.length > 0) { 
    // do something 
} 

是真的一樣

if (array.length) { 
    // do something 
} 

此斷言是真的，當array不是falsy，它具有length屬性集，它的價值不falsy（false，0，NaN， null和undefined是虛假的）。

在這種情況下，我們不是使用數組，而是使用NodeList，但它有一個長度，所以原理是一樣的。