javascript - 找到最近的 href 属性的最佳方法？

Question

为什么我不认为它是重复的。

Hmm, I think that's slightly different to what I'm asking. I don't want to add a listener to all A tags, rather, substract an href attribute, if any, on a click event's target.

我正在尝试“Ajaxify”我的整个网站，以便当用户单击页面中包含的任何链接时，脚本会发送“url”或 HREF 属性(所单击元素的)到 Ajax 函数，该函数反过来呈现请求的内容(如单击的链接所示)。

如果元素是链接，我需要找到被单击元素的 HREF 属性。 这里的问题是，许多元素可以包含在 A 标记中(因为我构建它们的方式)，而 e.target.href 则不然必须始终返回 HREF 属性。

这是我到目前为止所拥有的:

function ajaxifyLinks(e) {
    var target = e.target;
    e.preventDefault();
    while(!target.href) {
        target = target.parentNode;
    }
    if(target.href) {
        ajaxLoad(target.href);
    }
}
document.body.addEventListener('click', ajaxifyLinks);

以下是我拥有的不同“可点击”链接的示例:

<!-- Link -->
<a href="/cats">
   cats
</a>

<!-- Link -->
<a href="/hello">
   <span>
      <span> hi </span>
   </span>
</a>

<!-- Link -->
<a href="/bye">
   <span>
      bye
   </span>
</a>

正如您所看到的，这就是为什么 e.target.href 并不总是返回 HREF 属性，因为您实际上单击的是“链接的”span 元素，但是，浏览器确实需要你到链接。为什么会出现这种情况？我可以从这种行为中受益吗？ (例如，提取浏览器将您带到的位置，即使您没有点击 A 标记)。

我不喜欢我的解决方案，因为 while 循环只是不断查找 DOM 树，有时是不必要的(当 e.target 不是链接或包含在链接中时)。

谢谢。

Answer 1

如果单击的元素没有 href，它将在其父元素中搜索具有 href 的元素。普通的 JS 解决方案。

function findUpTag(el, attr) {
    while (el.parentNode) {
        el = el.parentNode;
        if (el[attr]) {
            return el;
        }
    }
    return null;
}

document.body.onclick = function (event) {
    event.preventDefault();

    var href = event.target.href;
    
    if (!href) {
        var closest = findUpTag(event.target, 'href');
        if (closest) {
            href = closest.href;
        }
    }

    document.getElementById('output').innerHTML = 'element clicked: ' + event.target.nodeName + '<br>closest href: ' + href;
};

a,
output {
    display: block;
}

<!-- Link -->
<a href="/cats">
   cats
</a>

<!-- Link -->
<a href="/hello">
   <span>
      <span> hi </span>
   </span>
</a>

<!-- Link -->
<a href="/bye">
   <span>
      bye
   </span>
</a>

<output id="output"></output>