ウェブページにカスタム右クリックメニューを追加するにはどうすればいいですか? 質問する

ウェブページにカスタム右クリックメニューを追加するにはどうすればいいですか? 質問する

Web アプリケーションにカスタムの右クリック メニューを追加したいと考えています。これは、事前に構築されたライブラリを使用せずに実行できますか? 実行できる場合、サードパーティの JavaScript ライブラリを使用しないシンプルなカスタムの右クリック メニューを表示するにはどうすればよいでしょうか?

私は Google Docs のようなものを目指しています。ユーザーが右クリックして独自のメニューを表示できるようにします。

注:誰かがすでに作成したものを使用するのではなく、独自のライブラリを作成する方法を学びたいと考えています。ほとんどの場合、サードパーティのライブラリには機能が過剰に詰め込まれていますが、必要な機能だけが必要なので、完全に自分で手作りしたいのです。

ベストアンサー1

あなたの質問に答えるには、contextmenu以下のようにイベントを使用します。

if (document.addEventListener) {
  document.addEventListener('contextmenu', function(e) {
    alert("You've tried to open context menu"); //here you draw your own menu
    e.preventDefault();
  }, false);
} else {
  document.attachEvent('oncontextmenu', function() {
    alert("You've tried to open context menu");
    window.event.returnValue = false;
  });
}
<body>
  Lorem ipsum...
</body>

しかし、デフォルトの右クリック動作を本当に上書きしたいのか自問する必要があります。これは、開発しているアプリケーションによって異なります。


JSフィドル

おすすめ記事