BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] ウェブページにカスタム右クリックメニューを追加するには？

2022-03-14 16:49:12

質問

Webアプリケーションにカスタムの右クリックメニューを追加したいのですが、どうすればよいですか？これは、事前に作成されたライブラリを使用せずに行うことができますか？もしそうなら、サードパーティのJavaScriptライブラリを使用しない、シンプルなカスタム右クリックメニューを表示する方法を教えてください。

Google Docsがやっているようなものを目指しています。それは、ユーザーが右クリックし、ユーザー独自のメニューを表示することができます。

NOTE 私は、誰かが既に作ったものを使うのではなく、自分で作る方法を学びたいと思っています。なぜなら、ほとんどの場合、サードパーティのライブラリは機能が肥大化しており、私は必要な機能だけが欲しいので、完全に自分の手で作りたいのです。

解決方法は？

質問に答える - 使用 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>

しかし、本当にデフォルトの右クリックの動作を上書きしたいのか、それは開発中のアプリケーションによります。

JSFIDDLE

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します