Warning: Undefined array key 4 in /home/c3937730/public_html/dubdesign.net/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 21
Warning: Undefined array key 4 in /home/c3937730/public_html/dubdesign.net/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 33
右クリック時に処理を行う oncontextmenu イベントで、右クリック禁止とアラート表示を出してみます。
かかかず
すごく簡単なコードです。
JavaScriptのコードだけで実装できるので、是非最後までご覧いただけたら嬉しいです。
contextmenu
JavaScriptのcontextmenu は、マウスの右ボタンをクリックか、コンテキストメニューキー（WindowsだとShift+F10）を押すことで発行されるイベントです。
window.addEventListener('contextmenu', function (e) {
// ここに処理内容
});この記事では .addEventListener で contextmenu トリガーで設定をしています。
右クリックでアラート表示が出るサンプル
早速サンプルです。
このページで右クリックするとウィンドウの上部に「右クリックされました。」の表示が出ます。
かかかず
この記事でも右クリックのアラートが出るので試してみてください。
ざっくりとしたコードの解説
コードはJavaScriptだけで実装可能です。ざっくりですがコードの解説をします。
JavaScript
はじめに .addEventListener に contextmenu でマウスの右ボタンをクリックか、コンテキストメニューキーが呼び出された時の関数を設定します。
関数は .preventDefault() と alert の簡単な2つのコードで、.preventDefault() で右クリックに対する動作を止めさせて、alert() でアラートをウィンドウ内に表示させます。
window.addEventListener('contextmenu', function (e) {
e.preventDefault(); // 動作を停止
alert('右クリックされました。'); // 右クリックでのアラート表示
}, false);さいごに
今回は、右クリック禁止の実装をしてみました。
簡単でシンプルなコードなので、これをベースにカスタマイズしてみてください。
