单击外部元素- JQuery

Click outside element - JQuery

本文关键字：JQuery 元素 外部 单击      更新时间：2023-09-26

我想了解如何隐藏一个元素，当你点击外部

这里有一个来自:

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

$(document).on('click', function(event) {
  if (!$(event.target).closest('#menucontainer').length) {
    // Hide the menus.
  }
});
谁能帮我分析一下这个吗?我不明白为什么我们需要使用长度属性?

也最接近的遍历到DOM的顶部从它开始，然后停止一个它到达顶部?

欢呼

您需要检查长度，因为jQuery查询总是返回一个结果，如果没有找到则返回空结果。一旦你检查了长度，你就可以判断点击是在内部(长度> 0，找到了一个元素)还是在外部(长度=== 0，没有找到元素)

详细说明:

1号线:美元(文档)。On ('click'， function(event){…});

绑定在文档(DOM)中的任何点击。利用你解除束缚的机会。("点击 ', .....);在你用过之后。否则它将在每次点击时无休止地执行。

2行:

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

事件。Target ===(=)在dom中被点击的元素

.close ('#menucontainer') =通过测试元素本身并遍历其在DOM树中的祖先来获得与选择器匹配的第一个元素。含义:当在 MenuContainer中点击时，它将返回一个带有第一个'# MenuContainer '元素的数组。当菜单容器之外有点击时，它将返回一个空数组。(未找到元素).

。JQuery的默认行为是在没有找到任何内容时返回一个空数组。如果在If语句中放入一个空数组，它将返回true。因为它是一个定义对象。它被定义为一个数组。然而数字0 == false。这是他们在数组中加上。length。当> 0 (true)为空时，它将返回0 (false)。

在JavaScript中，一切都是'真'或'假'，对于数字0(和NaN)表示假，其他一切都为真。

查看nick的链接(是否有"存在"jQuery的函数?)

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
相关文章：