JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのoncontextmenuイベントとは？使い方とサンプルコードを解説

oncontextmenuイベントの概要

JavaScriptにおけるoncontextmenuイベントは、ページ内の要素を右クリックしたときにコンテキストメニューが開こうとするタイミングで発生するイベントです。このイベントは、HTMLタグの属性として直接指定できるほか、addEventListener()メソッドを使って登録することもできます。

なお、イベントハンドラ内でevent.preventDefault()を呼び出すと、ブラウザ標準の右クリックメニューの表示をキャンセルできます。そのため、独自デザインのカスタムコンテキストメニューを実装したい場合などにも、このイベントはよく活用されています。

サンプルコード

以下のコードを実行すると、JavaScriptでoncontextmenuイベントを扱う方法を確認できます。

<html>
   <head>
      <script>
         <!--
             function sayHello() {
                alert("You right clicked here.")
             }
          //-->
      </script>
   </head>
   <body>
      <p oncontextmenu = "sayHello()">Right click</p>
   </body>
</html>

コードの解説

この例では、<p>要素に対してoncontextmenu属性を設定しています。ユーザーが「Right click」という文字列の上でマウスを右クリックすると、イベントが発火し、関数sayHello()が実行されます。その結果、「You right clicked here.」というメッセージがアラートとして表示されます。

このようにoncontextmenuイベントを使えば、右クリック操作を検知して任意の処理を追加できるため、操作ガイドの表示やカスタムメニューの実装など、さまざまな場面で応用できます。

  1. JavaScriptのonpageshowイベントの使い方を解説

    onpageshowイベントは、JavaScriptにおいてユーザーが新しいWebページに到達したとき、つまりページが表示されたタイミングで発生するイベントです。 onpageshowイベントの特徴 onpageshowイベントはonloadイベントとよく似ていますが、動作に重要な違いがあります。onloadイベントはページが最初に読み込まれたときに一度だけ発生しますが、onpageshowイベントはページが表示されるたびに発生します。そのため、ブラウザの「戻る」ボタンなどでキャッシュからページが再表示された場合でも、onpageshowイベントは確実に発火します。 また、イベントオブジェクト

  2. JavaScriptのイベントキャプチャとは？仕組みと実装方法を解説

    イベントキャプチャ（Event Capturing）とはイベントキャプチャとは、発生したイベントがDOMツリーの最上位要素からターゲット要素へと向かって伝播していく仕組みのことです。これは、ターゲット要素から最上位要素へと逆方向にイベントが伝わるイベントバブリング（Event Bubbling）とは正反対の動作になります。なお、DOMにおけるイベント伝播は「キャプチャフェーズ」「ターゲットフェーズ」「バブリングフェーズ」の3段階に分かれており、イベントキャプチャはその最初の段階に相当します。windowやdocumentなどの上位ノードから順に、下位ノードへとイベントが降りていくイメージです。