拦截点击时，如何检测嵌套在锚点内的点击？

Question

出于测试目的（测试导航组件），我想阻止导航离开页面

我在页面级别拦截点击，带有一个根元素 .onClick()（它是反应，但在这里不确定它是否重要。）我没有控制页面内容。

在页面内容中，有“A”链接到其他网站。我正在拦截所有点击，但我只对导航离开的点击感兴趣，而不是对下拉菜单等 UX 元素的点击。

现在，在阅读了有关点击事件的文档后，我仍然无法区分导航锚点内的点击和其他任何内容的点击：UI 元素、下拉菜单...

现有答案建议检查 target = «A»，但由于我的 «a» 包含重叠的子 «div»«div»...点击目标最终是 «div» 而不是 «a»。

那么，我如何检查点击事件以检测它是否是对锚点内的某物的点击，从而导致导航离开我的页面？ （为了防止Default()吧）

或者也许还有其他方法可以以受控方式拦截页面外的导航？

Answer 1

您可以向上遍历元素层次结构以确定事件目标是否包含在锚点中：

document.onclick = (e) => {
  let target = e.target;
  
  while(target) {
    if (target.tagName === 'A') {
      console.log('Clicked on anchor');
      break;
    }
    
    target = target.parentElement;
  }
};

<a href="javascript:void(0)">
  <span>Click <strong>here</strong></span>
</a>
<br>
<a href="javascript:void(0)">Click here</a>
<br>
<span>Click here</span>