使用长度属性获取事件目标时出现混淆

Confusion in using length property to get the event target

本文关键字：目标 事件 属性 获取      更新时间：2023-09-26

所以，我正在浏览这篇关于使用停止事件传播时的危险的文章。在描述除了使用stopPropagation之外还可以做什么的部分中，显示了以下代码:

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

我在这里没有得到的是为什么在语句中使用length属性?是不是足够的closest来确定是否点击元素是事件目标?

因为.close()总是返回一个真实的jQuery对象，所以如果只是检查.closest返回的值，它将永远不会满足条件。

jQuery对象的length属性将返回它所引用的dom元素的个数，所以为了检查最近的是否在e.target的祖先树中找到了目标元素，我们可以检查length属性。如果没有找到匹配的元素，length将为0，否则它将包含找到的引用数

这是一个非常常用的'hack'(我可以说习语，如此广泛)。比起检查数组的大小是否大于零，你可以通过依赖JavaScript对象的真假属性来缩短代码。

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

和

是一样的
if (array.length) {
    // do something
}

该谓词为真，当array不为false时，它设置了length属性，且其值不为false (false、0、NaN、null、undefined为false)。

在这种情况下，我们不是使用数组，而是使用NodeList，但它有一个长度，所以原理是一样的。

相关文章：