画像の右クリック・ドラッグ制御について

最近の案件でよく画像の右クリックとドラッグを禁止してほしいとのご依頼がありましすのでメモ

WordPressならプラグイン「WP-Copyright-Protection」を導入すれば簡単に右クリック等の禁止ができますが
今回はhtmlへ直接記述し対応する方法となります。

追加したい要素に下記コードを記述るだけ(例えばbody要素の場合)

<body onMouseDown="return false;" onSelectStart="return false" oncontextmenu="return false;">

 

oncontextmenu属性で右クリックを禁止しています

onmousedown属性とonselectstart属性でドラッグ動作を禁止しています。

 

これで問題解決!!

更に画像のみの場合はjQueryでimg要素に属性追加をすれば。。。。

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script> $(function(){
$('img').attr('onmousedown', 'return false');
$('img').attr('onselectstart', 'return false');
$('img').attr('oncontextmenu', 'return false');
}); </script>

 

こうすれば、img要素に対して属性を追加してくれ画像のみ右クリックとドラッグの禁止が可能となります。

次は最初に記述したプラグイン「WP-Copyright-Protection」についても記述しとこう〜っと♪