javascript - 将 onclick 事件设置为空跨度(CSS 中设置的图标)？

Question

我继承了一个代码库，其中使用一些 <span> 在图像上设置图标散布在图像中。跨度看起来像:

<span class='circle_logo'></span>

我需要在这些图标的 onclick 事件中触发一些事情发生。

我过去通过切换到 <button> 解决了这个问题，但这在这种情况下不起作用(它会弄乱特定的位置)。我尝试添加一些   s 到跨度但它不起作用，似乎即使我添加字符，点击也必须在字符的实际像素上。有什么想法吗？

感谢阅读。

Answer 1

假设 span 以某种方式可见，只需使用 Javascript 附加处理程序，如下所示:

document.querySelector('.circle_logo').addEventListener('click', () => {
  console.log('clicked');
});

.circle_logo {
  background-image: url("https://www.gravatar.com/avatar/681cf17a49fa99ff9aa2289734aafac2?s=32&d=identicon&r=PG");
  display: inline-block;
  width: 30px;
  height: 30px;
}

<span class='circle_logo'></span>