Question

我想阻止导航远离页面，以进行测试（测试导航组件）

我正在拦截页面级别的点击，使用根元素.onClick（）（它的反应但不确定它在这里很重要。）我不控制页面内容。

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

目前，在阅读点击事件的文档后，我仍然无法区分导航锚点内的点击次数和点击其他内容：UI元素，下拉菜单......

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

那么，我如何检查点击事件以检测是否点击了锚点内的某些内容，导致导航离开我的页面？（为了防止默认（）它）

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

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>

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

1 个答案: