如何检测超链接的右键单击上下文菜单中的哪个选项被单击?

Mic*_*ulc 7 html javascript browser contextmenu hyperlink

我们假设我使用的是默认浏览器的contextmenu.

  • 我怎样才能发现用户例如从右键单击上下文菜单中选择了"复制链接位置"?
  • 如何在"复制链接位置"操作后覆盖默认行为?(例如,替换链接,但如果用户选择"在新选项卡中打开",它仍将是原始链接).

编辑:替换剪贴板中的链接右键关闭链接的上下文菜单(即使用户选择了不同于"复制链接位置"的选项)也是可接受的解决方案.

Bha*_*ata 5

不幸的是,由于安全原因,无法检测默认浏览器上下文菜单中选择的内容.

这也是不可能的,以覆盖覆盖默认功能/动作上默认的,因为安全原因,浏览器的文本菜单.

你可以做什么:

  1. 使用浏览器扩展(最终用户应首先安装扩展程序),您可以将自己的自定义选项与图标和功能一起添加到默认浏览器的上下文菜单中.

  2. 您可以在鼠标右键单击时覆盖默认行为.例如,右键单击后,您可以使用自己的功能显示自己的自定义上下文菜单.


编辑:我对OP(原始海报)的第一条评论的回答:

右键单击和oncotextmenu事件后的链接替换与您想要在您的问题中实现的目标无关!我上面写的那个

您可以在鼠标右键单击时覆盖默认行为

而这也意味着你可以取代右键点击后链接,但在你的问题,你要替换点击后链接特定菜单选项默认的上下文菜单.由于安全原因,这是不可能的.

你必须阅读有关该oncontextmenu事件的信息:

当在窗口上单击鼠标右键时,通常会触发contextmenu事件.除非阻止默认行为,否则将激活浏览器上下文菜单.


gue*_*314 5

编辑:关闭链接的上下文菜单后立即替换剪贴板中的链接(即使用户选择了与“复制链接位置”不同的选项)也是可接受的解决方案。

如果用户授予适当的权限,您可以使用附加到事件处理程序和异步剪贴板 API中的contextmenu事件focusoutwindowcontextmenu

<body>
  <a id="a" href="#">click</a>
  <script>
    a.addEventListener('contextmenu', e => {
      console.log(e);
      window.addEventListener("focusout", e => {
        console.log(e);
        navigator.clipboard.writeText(a.href)
          .then(() => {
            console.log('Text copied to clipboard');
          })
          .catch(err => {
            // This can happen if the user denies clipboard permissions:
            console.error('Could not copy text: ', err);
          });
        navigator.clipboard.readText()
          .then(text => {
            console.log('Pasted content: ', text);
          })
          .catch(err => {
            console.error('Failed to read clipboard contents: ', err);
          });
      }, {
        once: true
      });
    });
  </script>
</body>
Run Code Online (Sandbox Code Playgroud)

普林克