如何用JavaScript获取a标签超链接？嵌套元素右键点击异常求助

我编写了如下HTML与JavaScript代码，期望右键点击链接时弹出对应的超链接内容：

原始代码 #

JavaScript #

document.addEventListener('mousedown', function(event) {
  let elem = event.target;
  let jsonObject = {
    Key: 'mousedown',
    Value: event.button
  };
  if (event.button == 2) {
    console.log(elem.outerHTML);
  }
});

HTML #

<span style="font-size:xx-large">
    <a href="https://microsoft.com" target="_blank" rel="noreferrer noopener" shape="rect" style="color:rgb(17,85,204)">
        <i>
            <font color="#ff0000">Microsoft</font>
        </i>
    </a>
</span>
<br/>
<a href="https://google.com">Google</a>

右键点击Google链接时功能正常，但右键点击Microsoft链接时，总是返回font标签而非对应的a标签。我尝试了以下代码仍未解决：

尝试的代码 #

document.addEventListener('mousedown', function (event)
{
  let elem = event.target;
  let name = elem.tagName;
  let jsonObject =
  {
      Key: 'mousemove',
      Value: name == 'A' ? elem.outerHTML : ' '
  };

  if(event.button == 2 && name == 'A') 
    {alert(elem.outerHTML);}
});

请问是否存在获取a标签中超链接的通用方法？

解决方案 #

核心问题是event.target指向的是实际被点击的子元素（比如Microsoft链接里的<font>），而非外层的<a>标签。用Element.closest()方法可以完美解决这个问题：它会从当前元素开始向上遍历DOM树，找到匹配选择器的第一个祖先元素（包括自身）。

修改后的代码 #

document.addEventListener('mousedown', function(event) {
  // 仅处理右键点击（button值为2）
  if (event.button === 2) {
    // 查找最近的<a>标签
    const linkElement = event.target.closest('a');
    if (linkElement) {
      // 输出完整的a标签HTML
      console.log(linkElement.outerHTML);
      // 直接获取超链接地址（更实用）
      alert(linkElement.href);
    }
  }
});

补充说明 #

• closest('a')自动适配嵌套结构，不管点击的是<a>内部的任何子元素，都能准确定位到外层<a>标签
• 若只需获取超链接地址，直接用linkElement.href比outerHTML更高效，还能避免HTML结构的干扰
• 这种全局事件+closest的方式通用性极强，页面后续新增的链接也能自动生效，无需单独绑定事件

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