侦听来自锚标签的所有“ onClick”事件，这些事件可能包含子对象

Question

我正在尝试实现一个简单的（-ish）路由器作为练习。但是，我在检测锚点点击时遇到问题。理想情况下，只要URL更改（不使用哈希），我都想拦截一个事件，但是现在，我只希望能够拦截任何锚点事件。

到目前为止，这是我尝试过的：

的HTML

<nav id="mainMenu">
    <ul id="navlinks">
        <li>
            <a href="/">
                <span>HOME</span>
            </a>
        </li>
        <li>
            <a href="/posts">
                <span>POSTS</span>
            </a>
        </li>
    </ul>
</nav>

单独的JS文件

function intercept(event)
{
    console.log("triggered");
    var tag = event.target;

    if (
        tag.tagName.toUpperCase() === 'A' &&
        tag.href &&
        event.button == 0 &&
        tag.origin == document.location.origin
    ){
        event.preventDefault();
        console.log("default prevented")
    }
}

使用此代码，我仅检测span事件，而不检测<a>事件。如何使用Vanilla JS检测锚点事件（如果可能）？我也希望能够检测动态创建的锚点。

编辑1：更改了JS功能。控制台打印default prevented: SPAN：

function intercept(event)
{
    console.log("triggered");
    var tag = event.target;

    //if (
    //    tag.tagName === 'A'
    //){
        event.preventDefault();
        console.log("default prevented: " + tag.tagName);
    //}
}

编辑2：定位标记不会总是有子代，可能的子代可能不是span。

Answer 1

您需要做的就是从event.target元素中“遍历文档树”，直到找到锚标记。

该解决方案的优点是它利用事件委托，并且可以在页面生命周期中的任何时候运行。该document.documentElement属性是<html>标记，它在JavaScript开始执行时就存在。

function findParentByTagName(element, tagName) {
    var parent = element;

    while (parent !== null && parent.tagName !== tagName.toUpperCase()) {
        parent = parent.parentNode;
    }

    return parent;
}

function handleAnchorClick(event) {
    event = event || window.event;

    if (findParentByTagName(event.target || event.srcElement, "A")) {
        event.preventDefault();
        console.log("An anchor was clicked!");
    }
}

document.documentElement.addEventListener("click", handleAnchorClick, false);

<p>
  <a href="#">
    <span>
      <b>
        <i>Click me!</i>
      </b>
    </span>
  </a>
</p>

<p>
  <a href="#">Click me too!</a>
</p>