Obtenez l'ancêtre le plus proche de l'événement actuel en Javascript

Question

Je rencontre des difficultés pour sélectionner l'élément <tr> le plus proche d'un événement click.

Actuellement, pour le faire fonctionner, je sélectionne un nombre exact d'éléments dans la liste de event.path.

Je voudrais qu'il soit plus flexible sans avoir besoin de dépendre du numéro de position du chemin actuel.

HTML:

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

JavaScript:

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

L'utilisation event.closest('tr') ne fonctionne pas, et je reçois cette erreur:

Uncaught TypeError: event.closest is not a function

Est-ce que quelqu'un sait pourquoi?

Answer 1

Il semble que vous appeliez event.closest, ce qui ne semble pas correct. Vouliez-vous dire element.closest, ou peut-être 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>

Answer 2

Il n'y a pas de méthode closest sur l'objet Event. Vous devez rechercher event.target.closest ou simplement mettre en cache la référence à l'élément auquel vous liez votre écouteur d'événement, puis utiliser la méthode closest pour cet élément.

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>