自定义链接按钮如何实现浏览器默认右键菜单及状态栏URL显示？

我制作了一个用于打开链接的自定义按钮/组件，但它没有普通超链接具备的右键菜单选项。

CSS代码 #

span.button {
  display: inline-block;
  border: solid;
  border-radius: 5px;
  padding: 5px;
  background-color: #ffffff1f;
}

span.button:hover {
  cursor: pointer;
  background-color: #ffffffff;
}

HTML代码 #

<span class="button" onclick="onNavButton('http://example.org/')">Example Button</span>

JavaScript代码 #

window.onNavButton = function(href="/") {
  document.location.href = href;
};

我希望该按钮的右键菜单能包含浏览器自带的“在新标签页打开链接”“在新窗口打开链接”“复制链接地址”等选项。是否有调用超链接相关右键菜单的标准方法？还是必须为网站完全自定义右键菜单？我使用原生JavaScript，必要时也可以学习使用扩展。

另外，能否实现鼠标悬停在该组件上时，像普通超链接一样在浏览器状态栏显示目标URL？

编辑: 该问题可能已有解答。

解决方案 #

不需要自定义右键菜单，直接用原生<a>标签改造是最简单的方案，既能保留所有原生超链接特性，又能实现自定义样式：

1. 将<span>替换为<a>标签，保留class="button"并添加href属性：

<a class="button" href="http://example.org/">Example Button</a>

2. 移除原有的onclick事件和对应JS函数，因为<a>标签本身具备跳转功能，无需额外JS逻辑。

3. 微调CSS确保样式正常（原有样式可直接复用，仅标签更换、类名不变）：

a.button {
  display: inline-block;
  border: solid;
  border-radius: 5px;
  padding: 5px;
  background-color: #ffffff1f;
  /* 移除默认链接下划线 */
  text-decoration: none;
  /* 继承文本颜色，避免默认蓝色 */
  color: inherit;
}

a.button:hover {
  cursor: pointer;
  background-color: #ffffffff;
}

改造完成后，这个按钮会自动拥有以下原生特性：

• 完整的原生右键菜单（包含在新标签页打开、复制链接地址等选项）
• 鼠标悬停时浏览器状态栏自动显示目标URL
• 支持键盘Tab聚焦、回车跳转等无障碍功能

如果因特殊需求必须使用<span>而非<a>标签，就需要手动实现自定义右键菜单，流程会复杂很多：

• 监听contextmenu事件并阻止默认行为
• 手动创建菜单元素，实现“新标签页打开”“复制链接”等功能
• 处理菜单的显示/隐藏、点击事件，且浏览器通常不允许自定义状态栏内容，只能通过title属性显示提示，无法完全模拟原生状态栏效果

显然，用<a>标签改造是最优解，既符合浏览器原生行为逻辑，又能满足样式需求。

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