Javascript:关于 elem.closest() 的逻辑

Question

当我把多个tagNames和classNames放在elem.closest()的括号中时，如下

table.onclick = function(event) {  
      let target = event.target.closest('.none-class,none-elem,td,.none-class2,none-elem2'); 
      console.log(target);
}

即使除了“td”元素之外的类和标签不存在。它总是返回 'td' 元素。 据我了解“CSS选择器规则”，如果元素用逗号分隔，则表示“和”，因此它“选择所有元素”。而这里的逗号表示“或”。有人能告诉我“elem.closest()”的工作逻辑吗？

Answer 1

.closest()将搜索祖先并返回与选择器对应的第一个。

逗号表示或。所以你的选择器如下:

给我第一个祖先:

• 具有“非类”类或
• 是一个自定义的 HTML 标签 <none-elem> 或
• 是一个HTML标签<td> 或
• 具有“none-class2”类或
• 是一个自定义的 HTML 标签 <none-elem2>

因此，您最近的祖先对应于您的选择器中的第三条规则。

如果你想用AND写一个选择器，你必须写成类似td.none-class2的东西或 none-elem.none-class .注意点前没有空格