ハイパーリンクの右クリックされたコンテキストメニューからどのオプションがクリックされたかを検出するにはどうすればよいですか?

Michal_Szulc

デフォルトのブラウザのコンテキストメニューを使用していると仮定しましょう。

  • たとえば、ユーザーが右クリックのコンテキストメニューから[リンクの場所をコピー]を選択したことを確認するにはどうすればよいですか?
  • 「リンクの場所をコピー」アクションの後にデフォルトの動作を上書きするにはどうすればよいですか?(たとえば、リンクを置き換えますが、ユーザーが[新しいタブで開く]を選択した場合でも、元のリンクのままになります)。

編集:リンクのコンテキストメニューを閉じた直後にクリップボードのリンクを置き換える(ユーザーが[リンクの場所をコピー]以外のオプションを選択した場合でも)ことも許容できる解決策です。

ゲスト271314

編集:リンクのコンテキストメニューを閉じた直後にクリップボードのリンクを置き換える(ユーザーが[リンクの場所をコピー]以外のオプションを選択した場合でも)ことも許容できる解決策です。

ユーザーが適切な権限付与した場合、イベントハンドラーおよび非同期クリップボードAPIcontextmenufocusoutアタッチさwindowれたcontextmenuイベント使用できます

<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>

plnkr

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ