JavaScriptのoncontextmenuとは？右クリック時のコンテキストメニュー制御方法を解説
oncontextmenu は、マウスの右クリックによってコンテキストメニューが表示される直前に発生するイベントです。
このイベントの戻り値を false にすると、右クリックメニューを表示させないようにできます。
oncontextmenuイベントとは？
右クリックしたときにブラウザが表示する「コンテキストメニュー」。
このメニューが表示される直前に発生するのが oncontextmenu イベントです。
主な用途は次のとおりです。
- 右クリックメニューを無効化したいとき
- 独自の右クリックメニューを表示したいとき
- 右クリック操作を検知したいとき
使用例：右クリックメニューを無効化する
もっともよく使われるのが、右クリックメニューを表示させない方法です。
<body oncontextmenu=”return false”>
→ 右クリックしてもブラウザのメニューが表示されなくなります。
特定の要素だけ右クリック禁止にする
ページ全体ではなく、特定の要素だけ右クリックを無効化することもできます。
<img src=”sample.jpg” oncontextmenu=”return false”>
→ 画像だけ右クリック禁止にできます。
右クリック時に独自処理を実行する
右クリックされたことを検知して、独自の処理を実行することも可能です。
<div oncontextmenu=”alert(‘右クリックされました’); return false;”>
右クリックしてみてください
</div>
右クリックしてみてください
</div>
→ 独自メニューを作る際の基礎にもなります。
まとめ
oncontextmenuは右クリック時に発生するイベント- return false でブラウザのコンテキストメニューを無効化できる
- 特定の要素だけ右クリック禁止にすることも可能
- 独自の右クリックメニューを作る際にも利用される
