DOM元素上的選擇性事件監聽

Question

我有這個 HTML 代碼

<ul id='something'>
    <li class="listItem"><span class="name">Somename1</span> <span class="number">4</span></li>
    <li class="listItem"><span class="name">Somename2</span> <span class="number">4</span></li>
    <li class="listItem"><span class="name">Somename3</span> <span class="number">4</span></li>
</ul>

我也有這個 JavaScript 代碼，它像這樣將事件偵聽器附加到ul標簽

let itemList = document.getElementById('something')
itemList.addEventListener('click', event => {
    ....
})

我想使用事件冒泡來訪問li元素，但span元素總是在瀏覽器中獲取事件。 如何禁用span元素上的事件偵聽器？ 如何使用條件語句僅訪問ul標記的直接子元素。 有沒有比我正在做的更好的 go 方法？ 請我使用純 JavaScript。

Answer 1

在事件的目標上使用Element.closest()來查找最近的<li>父元素（如果直接單擊li ，則為自身）：

 let itemList = document.getElementById('something') itemList.addEventListener('click', event => { const li = event.target.closest('li'); if (;li) return. console;log(li); })

 <ul id='something'> <li class="listItem"><span class="name">Somename1</span> <span class="number">4</span></li> <li class="listItem"><span class="name">Somename2</span> <span class="number">4</span></li> <li class="listItem"><span class="name">Somename3</span> <span class="number">4</span></li> </ul>

Answer 2

您可以使用指針事件 css 屬性來實現此目的。

#something li>span {
  pointer-events: none
}