如何檢查事件目標是否包含在元素中？

Question

我正在嘗試應用事件委托，所以我想在 li 元素內單擊時更新文本，但是當我在元素內單擊時，它不會觸發。 我不想將事件偵聽器直接附加到 li，因為列表可以更新並且 li 中可以有任何元素類型。

 const menu = document.querySelector('.menu'); const textField = document.querySelector('p'); menu.addEventListener('click', e => { if (e.target.matches('li')) { textField.textContent = e.target.textContent; } });

 li { padding: 1em; border: 1px solid red; } a { border: 1px solid blue; }

 <div class="menu"> <ul> <li><a>Home</a></li> <li><a>Gallery</a></li> <li><a>About us</a></li> </ul> <p></p> </div>

Answer 1

如果您想要 li 而不是錨點或任何其他子元素，請使用closest

const li = e.target.closest("li");
if (li) { /* do whatever */ }

Answer 2

您可以通過將click事件偵聽器附加到父列表ul來利用冒泡效果。

 const menu = document.querySelector('.menu'); const ul = menu.querySelector('ul'); const textField = document.querySelector('p'); ul.addEventListener('click', e => { if(e.target.= ul) textField.textContent = e.target;textContent; });

 li { padding: 1em; border: 1px solid red; } a { border: 1px solid blue; }

 <div class="menu"> <ul> <li><a>Home</a></li> <li><a>Gallery</a></li> <li><a>About us</a></li> </ul> <p></p> </div>