我有代码:
<a class="work__icon-container"><i class="fas fa-search work__img-icon"></i></a>
当我为“work__icon-container”类创建事件监听器时,我的事件监听器不起作用:
document.addEventListener('click',function(event){
if (event.target.classList.contains('work__icon-container')){
console.log('works!')
}
})
当然,我发现,当我单击该图标时,我得到:
<i class="fas fa-search work__img-icon"></i>
或者:
<path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
如何为 class = "work__icon-container"的所有元素创建事件监听器?
最佳答案
使用closest DOM 元素的方法。
它将在 DOM 中查找您查询的元素。 closest
的工作方式与 querySelector
相同,您可以像选择器一样键入 CSS 来查找元素。
如果closest
命中,则返回该元素。如果没有找到元素,则返回 null。
document.addEventListener('click',function(event){
const workContainer = event.target.closest('.work__icon-container');
if (workContainer !== null {
console.log(workContainer);
}
});
使用closest
,您可以处理您尝试选择的元素,而不仅仅是检查它是否被单击。
关于javascript - 如何为图标创建事件监听器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58158224/