JavaScript | 右クリックを禁止(コンテキストメニュー非表示)にする

2021-02-08JavaScript,JavaScript イベント

右クリックを禁止(コンテキストメニュー非表示)にする方法

JavaScriptを使ってWEBサイト上または特定の要素の上で、右クリックを禁止・右クリックのコンテキストメニュー表示させないうようにする方法の紹介です。

See the Pen JavaScript | change all checkbox by yochans (@yochans) on CodePen.

右クリック禁止はWEBアプリやゲームなどで、右クリックに独自の機能を追加する場合なんかに利用できます。

右クリックを禁止にする(addEventListener)

addEventListener()で「contextmenu」を指定したイベントで右クリックメニューを禁止にするサンプルコードです。

document.addEventListener('contextmenu', contextmenu);

function contextmenu(e) {
	e.preventDefault();
}

特定の要素内でのみ右クリックを禁止にする場合はその要素を指定します。

document.querySelector('#id').addEventListener('contextmenu', contextmenu);

function contextmenu(e) {
	e.preventDefault();
}

無名関数

document.addEventListener('contextmenu',  function(e) {
	e.preventDefault();
});

アロー関数

document.addEventListener('contextmenu', e => e.preventDefault());

右クリックを禁止にする(oncontextmenu)

oncontextmenuイベントを利用して右クリックメニューを禁止にするサンプルコードです。

document.oncontextmenu = contextmenu;

function contextmenu(e) {
	e.preventDefault();
}

「return false」でもOK

document.oncontextmenu = contextmenu;

function contextmenu() {
	return false;
}

無名関数

document.oncontextmenu = function(e) {
	e.preventDefault();
}

アロー関数

document.oncontextmenu = e => e.preventDefault();

2021-02-08JavaScript,JavaScript イベント

Posted by Yousuke.U