HTMLのoncontextmenuイベント属性とは？使い方とサンプルコードを解説
HTMLのoncontextmenuイベント属性は、ユーザーがHTMLドキュメント内の要素上で右クリックしてコンテキストメニュー（右クリックメニュー）を開こうとしたときに発生するイベントです。この属性を利用することで、右クリック操作を検知し、任意のJavaScriptスクリプトを実行することができます。
例えば、独自のカスタムメニューを表示したり、右クリック操作を無効化したりするなど、さまざまな用途に活用できる便利なイベント属性です。
構文（Syntax）
oncontextmenuイベント属性の基本的な構文は以下の通りです。
<tagname oncontextmenu="script"></tagname>
使用例（Example）
ここでは、HTMLのoncontextmenuイベント属性の具体的な使用例を見ていきましょう。
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
padding: 20px;
}
.box {
background: #db133a;
width: 140px;
height: 140px;
margin: 1rem auto;
color: #fff;
}
</style>
</head>
<body>
<h1>HTML oncontextmenu Event Attribute Demo</h1>
<p oncontextmenu="get()" class="box"></p>
<p>上の赤いボックスを右クリックして、コンテキストメニューを開いてみてください。</p>
<script>
function get() {
document.body.style.background = "#084C61";
document.body.style.color = '#fff';
}
</script>
</body>
</html>実行結果（Output）
上記のコードをブラウザで開くと、次のような画面が表示されます。
次に、赤いボックスの上で右クリックしてみましょう。すると、oncontextmenuイベントが発火し、指定されたJavaScript関数が実行されてページの背景色と文字色が変化します。
まとめ
oncontextmenuイベント属性は、右クリックによるコンテキストメニューの表示をトリガーとしてJavaScriptを実行できるHTMLのイベント属性です。カスタムコンテキストメニューの作成や、コンテンツ保護のための右クリック制限など、インタラクティブなWebページ制作において役立つ機能なので、ぜひ活用してみてください。
-
HTML ondragendイベント属性の使い方を徹底解説
ondragendイベント属性とはHTMLのondragendイベント属性は、HTMLドキュメント内でユーザーが要素やテキストのドラッグを終了した時点で発生するイベントです。ドラッグ&ドロップ操作の一連の流れの最後に実行されるため、ドラッグ完了後の処理(メッセージの表示や状態の更新など)を実装するのに便利です。なお、ondragendイベントはドラッグ元の要素に対して発生する点に注意してください。ドロップ先の要素で発生するのは「drop」イベントであり、役割が異なります。構文ondragendイベント属性の基本的な構文は以下のとおりです。<tagname ondragend=&q
-
HTMLのonpageshowイベント属性とは？使い方をサンプルコード付きで解説
HTMLのonpageshowイベント属性は、ユーザーがWebページへ移動（ナビゲート）したときに発生するイベントです。ページが最初に読み込まれたときはもちろん、ブラウザの「戻る」ボタンなどでキャッシュからページが再表示されたときにも発火する点が大きな特徴です。 構文 onpageshowイベント属性の基本構文は次のとおりです。 <body onpageshow="script"></body> HTML onpageshowイベント属性のサンプル ここでは、ページが表示されたタイミングでアラートを表示するシンプルな例を紹介します。 サンプルコード