javascript - 如何为图标创建事件监听器?

标签 javascript html dom

我有代码:

<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/

相关文章:

php - MySQL:从选择标记插入值被截断

html - 对面

javascript - 如何使用 Javascript 有效地确定 HTML 文档中同级元素的相对顺序

javascript - Dygraphs 实时趋势和同步

javascript - express.session.MemoryStore 不返回 session ?

javascript - 如何通过单击链接从 JSP 页面打开文件选择器?

javascript - 如何暂停 Javascript 执行

javascript - 使用 document.getElementById 获取渲染对象

javascript - 使用 vanilla Javascript 查找具有部分属性的 DOM 元素

javascript - 如何使用 react-router 将顶级组件状态向下传递给路由?