如何创建仅右键打开新标签、普通点击无效的a锚点链接

你现有代码出现URL追加#的问题，是因为重置href时使用了"#"值，浏览器会将其识别为指向当前页顶部的页内锚点，右键菜单交互过程中触发默认锚点逻辑就会修改当前URL。另外你预期的直接赋值void(0)的写法无效：void(0)运行结果是undefined，直接赋值给href属性会被序列化为字符串"undefined"，无法实现无跳转效果。

<a 
  href="javascript:void(0)"
  onClick={(e) => {
    // 拦截左键默认跳转行为
    e.preventDefault()
    // 此处可自定义左键点击后的业务逻辑
  }}
  onContextMenu={(e) => {
    const linkEl = e.currentTarget as HTMLAnchorElement
    // 右键触发时同步写入目标地址，保证浏览器右键菜单能读取到正确的跳转链接
    linkEl.href = "/target-link"
    // 同步逻辑执行完成后立即重置href，0ms延迟足够，不影响右键菜单读取地址
    setTimeout(() => {
      linkEl.href = "javascript:void(0)"
    }, 0)
  }}
>
  click here
</a>

• 左键跳转通过preventDefault()直接拦截，不会触发任何导航行为
• 无跳转状态下的href固定使用字符串值"javascript:void(0)"，该值不会触发URL变更，也不会产生页内滚动、锚点追加问题
• 不需要设置100ms的延迟，浏览器读取右键菜单关联链接是在contextmenu事件的同步执行阶段完成，事件循环进入下一个宏任务时再重置href完全不会影响右键菜单的「新标签页打开」功能
• 所有给href属性的赋值都需要传字符串类型，直接写JS表达式void(0)作为属性值不符合DOM属性的类型要求，无法生效

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