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>

Таким образом, ваш ближайший предок соответствует третьему правилу в вашем селекторе.

Если вы хотите написатьСелектор с И , вам придется написать что-то вроде td.none-class2 или none-elem.none-class.Не замечайте пробела перед точкой

Answer 2

В функции closest() - нет особого значения селекторов css.Запятая в css-селекторе фактически всегда означает ИЛИ в логическом смысле.Таким образом, правило будет соответствовать любому из них:

.none-class
none-elem
td
.none-class2
...

Если вы хотите, чтобы оно совпадало, например.только если td имеет класс .none, используйте:

td.none-class 

в качестве селектора.Читайте больше на селекторах CSS.