使用Vanilla JS开发SPA时，<a>标签内图片点击失效问题求助

修改route函数，将event.target替换为event.currentTarget——currentTarget始终指向绑定了点击事件的元素（也就是<a>标签），不受内部子元素影响：

const route = (event) => {
  event = event || window.event;
  event.preventDefault();
  window.history.pushState({}, "", event.currentTarget.href);
  handleLocation();
};

如果需要兼容更复杂的嵌套结构，可以用closest('a')从点击的元素向上查找最近的<a>标签：

const route = (event) => {
  event = event || window.event;
  event.preventDefault();
  const linkElement = event.target.closest('a');
  if (linkElement) {
    window.history.pushState({}, "", linkElement.href);
    handleLocation();
  }
};

方案3：CSS事件穿透

给<a>标签内部的所有子元素添加pointer-events: none，让点击事件直接穿透到父级<a>标签：

.mainServices-section > * {
  pointer-events: none;
}

注意：如果内部子元素需要绑定自己的点击事件，这个方案不适用。

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