在Javascript中獲取當前事件中最接近的祖先

Question

我無法從點擊事件中選擇最接近的<tr>元素。

當前，爲了使其工作，我從列表中選擇了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 is not a function

有誰知道爲什麼嗎？

Answer 1

看起來你打電話給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>

Answer 2

還有就是Event對象沒有closest方法。您需要查找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>