Web系システムの開発を行っていると、まれに「画像の保存を禁止したいので、右クリック禁止にしてほしい」という要求を受けることがあります。右クリック禁止は完全に防止できる方法ではありませんが、保存が難しくなることは確かなので一定の需要があります。実装方法としては、body要素のonContextMenuハンドラ内でfalseを返すことで禁止するのが一般的です。
<body onContextMenu="alert('右クリックは禁止です');return false">ただ、この実装方法では画像以外の単純なテキストリンクや何も無いところで右クリックした場合でもコンテキストメニューが開かず、マウスだけで新しいウィンドウを開きたいときに不便を強いることになります。これはユーザービリティ的に大きなマイナスです。
要求を分析してみましょう。画像の上でコンテキストメニューを開いて画像を保存されるのを禁止したいので、画像以外の場所でのコンテキストメニューは禁止する必要がありません。ということは、img要素のonContextMenuハンドラでfalseを返せばよいことになります。
<img src="fice.jpg" onContextMenu="return false" />しかし、この方法では保存されたくない画像が大量にある場合は全てにイベントハンドラを設定しなければならず、手間がかかります。なので、スクリプトでイベントハンドラを設定してあげましょう。まずは単純に全ての画像に設定するスクリプトの例です。
ページの読み込み完了と同時にdocument配下のimg要素を全て取得し、oncontextmenuプロパティに匿名関数を設定しています。
<!--
function noContextMenu()
{
var img_elements = document.getElementsByTagName('img');
for (var i in img_elements) {
img_elements[i].oncontextmenu = function() {
alert('右クリックは禁止です');
return false;
}
}
}
//-->
次に、id属性にprofileがついた要素の配下にあるimg要素のみを右クリック禁止にするスクリプトの例です。
logo.gifの上では普通にコンテキストメニューが開きますが、fice1.jpgとfice2.jpgの上ではアラートが出ます。
<!--
function noContextMenu(id)
{
var parent_element = document.getElementById(id);
if (parent_element) {
var img_elements = parent_element.getElementsByTagName('img');
for (var i in img_elements) {
img_elements[i].oncontextmenu = function() {
alert('右クリックは禁止です');
return false;
}
}
} else {
alert('no element');
}
}
//-->
画像の保存を難しくするために右クリック禁止を行う際は、ぜひご利用ください。
No comments yet