イベントで「右クリック禁止」を禁止してみよう：初心者のためのJavaScript入門（2）（3/4 ページ）

JavaScriptで本格的なプログラミングの世界に触れてみよう。連載を通じて実用的なアプリケーションを作れるようになるはず！？（編集部）

[小島尚基，有限会社インテレクトキューブ] PC用表示関連情報

LINE

Hatena

イベントをいろいろな場所に書いてみる

　ここまではボタンに対してイベントを使いました。しかし、イベントは、さまざまなものに対して使うことができます。

　例えば、Webページ全体にイベントを使うこともできます。この場合、HTMLのタグにJavaScriptを書きます。

　さっそくJavaScriptを書いて、サンプルをWebブラウザで動かしてみましょう。

<html>
  <body onload="alert('いらっしゃいませ。')" onunload="alert('またどうぞ。')">
　　ようこそJavaScriptの世界へ<br>
  </body>
</html>

　onload（オンロード）は、HTMLが読み込まれたことをきっかけにするイベントです。onunload（オンアンロード）は、別のWebページに移動したり、Webページが閉じられたりしたことをきっかけにするイベントです。

HTMLが読み込まれたとき

別ページに移動したときやWebブラウザを閉じたとき

　onloadは、海外のWebサイトなどではポップアップ広告を出すのに使われていますが、本来はWebページが完全に読み込まれてから、JavaScriptを動かしたいときなどに使うのが正しい使用方法です。

　便利なJavaScriptも使用方法によっては、ユーザーの反感を買うことになるので、注意しましょう。

　また、最近は減りましたが、次のようなJavaScriptを使ったWebページを見かけることがあります。

<html>
  <body oncontextmenu="alert('右クリック禁止！'); return false">
　　このページは右クリック禁止です。<br>
  </body>
</html>

　Windowsの右クリックで出るメニューのことをコンテキストメニューといいます。oncontextmenu（オンコンテキストメニュー）は、右クリックで出てくるメニューを表示したことをきっかけにするイベントです。

【注意】

oncontextmenuは、WindowsのInternet Explorer、Firefox、Google Chromeでは有効ですが、Operaはoncontextmenuのイベントをサポートしていません。

このように、Webブラウザの種類やバージョンによってサポートしてるJavaScriptに若干の違いがあります。

Webブラウザによる違いは、JavaScriptを扱ううえで避けてとおれない問題なので、機会があれば解説したいと思います。しかし、この連載では当面、Internet Explorer 8を使用して解説をしていきます。

　oncontextmenu=の中身を少し詳しく見てみましょう。alertで警告ダイアログを出した後に、;およびreturn falseと書かれています。

　;（セミコロン）はJavaScriptの区切りです。複数のJavaScriptを書くときに、JavaScriptの終わりを;で区切ります。JavaScriptが1つしかない場合や、JavaScriptの最後には書かなくてもかまいません。

　次のreturn falseを簡単に説明すると、起きたイベントをなかったことにしたいというときに使います。この場合、本来は「右クリックされたらコンテキストメニューを表示する」ところを、警告ダイアログを表示して、本来の「右クリックの動作をなかったこと」にしています。

　このほかにもreturn falseの使い方として、<a>タグに対して、

<a href="http://www.google.com/" onclick="return false">リンクできない</a>

とすると、本来はリンクをクリックするとURLに移動するのに、リンクがクリックされたことを「なかったこと」にしてしまい、ページ遷移しないようにできます。

　このreturn falseも、一見使い道がないように思いますが、覚えておくと大変役に立ちます。

　ところで、この右クリック禁止がうっとうしいという人多いですよね。そこで、JavaScriptを使って「右クリック禁止を禁止」してみましょう。

　まずは、先ほどの右クリック禁止のサンプルを実行して、右クリックが禁止になっているのを確認ください。

　さて、どのようにしたら、表示されているWebページのJavaScriptを上書きして、右クリック禁止を禁止できるでしょうか。

　皆さんは、第1回の冒頭で紹介したブックマークレットを覚えているでしょうか。ブックマークレットは、Webブラウザのアドレスバーに直接JavaScriptを書き込んで実行するものです。

　そう、ブックマークレットを使えば、表示されているWebページのJavaScriptを上書きできるのです！以下のスクリプトを1行でコピーして、Webブラウザのアドレスバーに張り付けてみてください。

javascript:alert('右クリック禁止を禁止！'); document.body.oncontextmenu=''; document.oncontextmenu=''; document.onmousedown=''; void(0)

　右クリック禁止が禁止されて、コンテキストメニューが表示されるようになりましたか。このブックマークレットを使えば、多くの「右クリック禁止サイト」の右クリック禁止を禁止にできると思います。

　サンプル以外でも、Webページで右クリック禁止を見つけたらこのブックマークレットを試してみてください。