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行： $（document）.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（true）当它找到一个元素时。

在JavaScript中，一切都是“真实的”或“虚假的”，对于数字0（和NaN）意味着错误，其他一切都是真的。

检查NickG他的链接（Is there an "exists" function for jQuery?）

Answer 3

jQuery选择器将返回一个包含所有匹配元素的数组。如果您使用ID作为选择器，例如('#menucontainer')，则长度将为0或1.如果我们点击菜单之外的某些内容，则无法找到最近的菜单，否定将为真，菜单可以隐藏。

 // 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

单击外部元素 - JQuery

3 个答案: