Получить ближайшего предка из текущего события в Javascript

1

У меня возникла проблема с выбором ближайшего элемента <tr> из события click.

В настоящее время, чтобы заставить его работать, я выбираю точное количество элементов в списке из event.path.

Я бы хотел, чтобы он был более гибким, без необходимости зависеть от текущего номера позиции пути.

HTML:

<tr>
  <td class="col-site">Stringname</td>
</tr>

JavaScript:

event.path[1].classList.add(this.openedClassState);

Использование event.closest('tr') не работает, и я получаю эту ошибку:

Uncaught TypeError: event.closest не является функцией

Кто-нибудь знает, почему?

  • 0
    @void - перейдите по этой ссылке: developer.mozilla.org/en-US/docs/Web/API/Element/closest
  • 1
    Это действительно говорит event.closest ?
Показать ещё 6 комментариев
Теги:
ecmascript-6
dom

2 ответа

2
Лучший ответ

Похоже, вы вызываете event.closest, что кажется неправильным. Вы хотели сделать element.closest, или, возможно, event.target.closest?

function handleClick(event) {
  const tr = event.target.closest('tr');
  tr.style.backgroundColor = 'red';
}


document.querySelectorAll('td').forEach(td => 
  td.addEventListener('click', handleClick));
td{border:1px solid blue}
<table>
  <tr>
    <td>Click</td>
    <td>me</td>
  </tr>
</table>
Поделиться
2

Не существует closest метода для объекта Event. Вам нужно либо искать event.target.closest либо просто кэшировать ссылку на элемент, к которому вы привязываете свой прослушиватель событий, а затем использовать closest метод для этого элемента.

const tds = document.querySelectorAll('td');

for(const td of tds) {
  td.addEventListener('click', event => {
    console.log(event.target.closest('tr').id);
    console.log(td.closest('tr').id); // this does the same thing
  }, false);
}
<table>
  <tr id="TR1">
    <td>Some text</td>
  </tr>
  <tr id="TR2">
    <td>Some text</td>
  </tr>
  <tr id="TR3">
    <td>Some text</td>
  </tr>
</table>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню