JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

テーブル

グラフ

背景

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

openBD

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptのcontextmenuで右クリック禁止とアラート表示

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

contextmenu

JavaScriptのcontextmenuで右クリック禁止とアラート表示

JavaScriptのcontextmenuで右クリック禁止とアラート表示

右クリック時に処理を行う oncontextmenu イベントで、右クリック禁止とアラート表示を出してみます。

かかかず
かかかず

すごく簡単なコードです。

JavaScriptのコードだけで実装できるので、是非最後までご覧いただけたら嬉しいです。

contextmenu

JavaScriptのcontextmenu は、マウスの右ボタンをクリックか、コンテキストメニューキー(WindowsだとShift+F10)を押すことで発行されるイベントです。

window.addEventListener('contextmenu', function (e) {
// ここに処理内容
});

この記事では .addEventListenercontextmenu トリガーで設定をしています。

右クリックでアラート表示が出るサンプル

早速サンプルです。

このページで右クリックするとウィンドウの上部に「右クリックされました。」の表示が出ます。

右クリック禁止画面
アラート表示時の画面
かかかず
かかかず

この記事でも右クリックのアラートが出るので試してみてください。

ざっくりとしたコードの解説

コードはJavaScriptだけで実装可能です。ざっくりですがコードの解説をします。

JavaScript

はじめに .addEventListener contextmenu でマウスの右ボタンをクリックか、コンテキストメニューキーが呼び出された時の関数を設定します。

関数は .preventDefault()alert の簡単な2つのコードで、.preventDefault() で右クリックに対する動作を止めさせて、alert() でアラートをウィンドウ内に表示させます。

window.addEventListener('contextmenu', function (e) {
   e.preventDefault(); // 動作を停止
   alert('右クリックされました。'); // 右クリックでのアラート表示
}, false);

さいごに

今回は、右クリック禁止の実装をしてみました。

簡単でシンプルなコードなので、これをベースにカスタマイズしてみてください。