JavaScript | 右クリックを禁止（コンテキストメニュー非表示）にする
JavaScriptを使ってWEBサイト上または特定の要素の上で、右クリックを禁止・右クリックのコンテキストメニュー表示させないうようにする方法の紹介です。
See the Pen JavaScript | change all checkbox by yochans (@yochans) on CodePen.
右クリック禁止はWEBアプリやゲームなどで、右クリックに独自の機能を追加する場合なんかに利用できます。
右クリックを禁止にする（addEventListener）
addEventListener()で「contextmenu」を指定したイベントで右クリックメニューを禁止にするサンプルコードです。
let contextmenu_function = () => {
event.preventDefault();
}
document.addEventListener('contextmenu', contextmenu_function);特定の要素内でのみ右クリックを禁止にする場合はその要素を指定します。
let contextmenu_function = () => {
event.preventDefault();
}
document.querySelector('#id').addEventListener('contextmenu', contextmenu_function);無名関数で指定する場合は以下のようなコードになります。
document.addEventListener('contextmenu', () => {
event.preventDefault();
});右クリックを禁止にする（oncontextmenu）
oncontextmenuイベントを利用して右クリックメニューを禁止にするサンプルコードです。
let contextmenu_function = () => {
event.preventDefault();
}
document.oncontextmenu = contextmenu_function;コンテキストメニューを非表示にするだけであれば「return false」でもOKです。
let contextmenu_function = () => {
return false;
}
document.oncontextmenu = contextmenu_function;無名関数で指定する場合は以下のように記述する事が可能です。
document.oncontextmenu = () => {
event.preventDefault();
}