Help us understand the problem. What is going on with this article?

JavaScriptによる右クリックの禁止・禁止を解除する方法

More than 1 year has passed since last update.

Webサイトなどで手軽に右クリックをできないようにする方法と、逆に右クリックを禁止したページで右クリックできるようにする方法を書いていきたいと思います。

右クリックの禁止方法

右クリックされた時のイベントはoncontextmenuで取得することができます。なので、このイベントリスナーでfalseをリターンすれば、右クリックを無効にすることができます。htmlタグに直接書く方法もありますが、今回はjsコードで書く方法を書いていきます。

document全体で右クリックを禁止する方法
document.oncontextmenu = function () {return false;}
html要素に対して右クリックを禁止する方法
document.getElementsByTagName('html')[0].oncontextmenu = function () {return false;}
body要素に対して右クリックを禁止する方法
document.body.oncontextmenu = function () {return false;}

以上の方法で、簡単に右クリックを禁止できるようになります。ただ、後述する方法で、この禁止を解除することができてしまうので、あくまで手軽に右クリックができなくなるだけということは覚えておきましょう。

右クリック禁止を解除する方法

禁止を解除する方法で、JavaScriptを無効にする方法がよく紹介されていますが、Webサイトの中にはJavaScriptを無効にすると真っ白なページが表示されるような処理をしているサイトも多くあります。なので、JavaScriptを無効にする方法は確実に有効なものではありません。確実に解除するには、デベロッパーツールなどを使って、oncontextmenuのイベントでtrueを返す処理をする必要があります。

デベロッパーツール(Chrome)を使って右クリック禁止の解除処理を実行させる

  1. Windowsの場合はF12、Macの場合はOption + Command + Iでデベロッパーツールを表示させます。
  2. Consoleを選択して、解除処理をJavaScrptで記述してenterキーを押す。

js_oncontextmenu.jpg

document全体の右クリック禁止を解除する方法
document.oncontextmenu = function () {return true;}
html要素に対しての右クリック禁止を解除する方法
document.getElementsByTagName('html')[0].oncontextmenu = function () {return true;}
body要素に対しての右クリック禁止を解除する方法
document.body.oncontextmenu = function () {return true;}

上記のようにデベロッパーツールを使えば、簡単に右クリック禁止を解除することができます。

追記

stopPropagationを使ってイベントの伝播を中断させる方法なら、何に対して右クリックが禁止になっていても、禁止を解除することができます。

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

まとめ

右クリックは、JavaScriptを使えば簡単に禁止できるのですが、逆に禁止を解除することもJavaScriptの知識があれば簡単にできてしまいます。

awesam86
Webエンジニアをメインに、iOS&Androidのアプリ開発とかもしています。よく使う言語はPHP、JavaScript、Java、Objective-C、Swiftといった感じです。ゲーム作りにも興味があるのでUnityを使ったアプリ作りを勉強中。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした