使用length属性来获取事件目标的困惑

Question

所以，当我使用Stopping Event Propagation时，我正在查看这个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

这是一个经常使用的＆＃39; hack＆＃39; （我可以说成语而非如此广泛）。而不是检查数组的大小大于零，您可以通过依赖JavaScript对象的truthy-falsy属性来缩短代码。

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

与

完全相同

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

这个谓词是正确的，当array不是假的时候，它设置了length属性，其值不是假的（false，0，{{ 1}}，NaN和null是假的。

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