contextmenu

コンテキストメニュー（イベント）

意味要素上で右クリックすると発生する。

contextmenuとは？

要素上で右クリック（またはコンテキストメニューキー）が行われたときに発生するイベント。

contextmenuの具体的な使い方

カスタムコンテキストメニューの実装

<style>
  #customContextMenu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 10px;
  }
</style>

<div id="targetArea">この領域で右クリックしてください</div>
<div id="customContextMenu">
  <button onclick="alert('オプション1が選択されました')">オプション1</button><br>
  <button onclick="alert('オプション2が選択されました')">オプション2</button>
</div>

<script>
  const targetArea = document.getElementById('targetArea');
  const customMenu = document.getElementById('customContextMenu');

  targetArea.addEventListener('contextmenu', (event) => {
    event.preventDefault();
    customMenu.style.display = 'block';
    customMenu.style.left = `${event.clientX}px`;
    customMenu.style.top = `${event.clientY}px`;
  });

  document.addEventListener('click', () => {
    customMenu.style.display = 'none';
  });
</script>

この例では、contextmenuイベントを使用してデフォルトのコンテキストメニューを防ぎ、カスタムのコンテキストメニューを表示しています。右クリックした位置にメニューが表示され、ドキュメント内をクリックするとメニューが非表示になります。

contextmenuに関するよくある質問

Q. contextmenuイベントの用途は？

A. カスタムコンテキストメニューの表示、特定の要素での右クリック動作の変更、セキュリティ上の理由でコンテキストメニューを無効化する場合などに使用されます。

Q. イベントをキャンセルするには？

A. event.preventDefault()メソッドを使用することで、デフォルトのコンテキストメニューの表示をキャンセルできます。

Q. モバイルでの動作は？

A. モバイルデバイスでは長押しがcontextmenuイベントをトリガーします。ただし、デバイスやブラウザによって挙動が異なる場合があります。

contextmenuが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのcontextmenuやclick、event.defaultPrevented、pointerlockchange、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。