如何避免为包含图片的按钮绑定事件时使用多个选择器？

你遇到的问题核心是点击图片时event.target指向的是<img>元素而非按钮，所以直接判断.my-button会失效。下面是两种不用多写选择器的解决办法：

方法1：使用Element.closest()（推荐） #

closest()方法会从当前元素向上查找，返回匹配指定选择器的最近祖先元素（包括自身）。这样不管点击的是按钮本身还是它内部的图片，都能正确匹配到.my-button：

document.addEventListener("click", (event) => {
  if (event.target.closest(".my-button")) {
    console.log('My button clicked')
  }
});

这个方法简洁且语义清晰，完全不需要额外添加子元素的选择器。

方法2：给图片添加pointer-events: none #

通过CSS让图片不接收鼠标事件，这样点击图片时，事件会直接穿透到下方的按钮元素，此时event.target就会是按钮：

.my-button img {
  pointer-events: none;
}

这种方法不需要修改JS代码，但要注意如果图片本身需要交互（比如点击图片做其他操作）就不能用了，适合纯装饰性的图片按钮。

另外你担心用<img>代替按钮不符合规范是对的：<button>是原生交互控件，自带可访问性支持（比如屏幕阅读器识别、键盘导航），而<img>只是媒体元素，用来做按钮会破坏语义，还需要额外处理很多可访问性问题，所以坚持用<button>是正确的选择。

内容的提问来源于stack exchange，提问作者pileup