　まっち　2021/06/04更新

右クリック禁止

JavaScript

javascriptで右クリック禁止を実装

最近のWebページでは画像などが右クリックの画像に名前をつけて保存といった操作ができないように実装されていることがよくある。

それを実装してみた。

今回の条件としては、画像の src に neko が含まれている場合は右クリックが禁止になるように実装をしていく。neko が含まれていなければ保存が可能となる。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Javascript Study</title>
    <script src="image_restriction.js"></script>
</head>
<body>
<img src="neko_125.JPG" style="width:320px;">
<img src="image_test01235.jpg" style="width:320px;">
<img src="neko_213.JPG" style="width:320px;">
<img src="tree_344.jpg" style="width:320px;">
</body>
</html>

ブラウザ

猫が映っている画像には neko が含まれてるので、猫の画像を右クリックして禁止されていて、猫の画像以外は右クリックが禁止されていなければ成功となる。

javascriptの実装

javascript

window.onload = function () {

    document.addEventListener('contextmenu', event => {

        if (event.target.tagName == 'IMG' && event.target.src.includes('neko'))
            event.preventDefault();
    });
};

という実装をするとうまくいく。

javascriptコードについて


window.onload = function () {

};

ここの部分は widow.loload と記述することで、ページの読み込みが完了したタイミングで処理が実行されるように指定。

document.addEventListener('contextmenu', event => {
        
    });

document とは、　Webページを構成しているHTML要素へアクセスできるオブジェクトであり、そのオブジェクトを使っていろいろな操作をしていく。

JavaScript documentオブジェクトの使い方

addEventListener　とは、さまざまなイベント処理を実行することができるメソッドで、下記のように使う

対象要素.addEventListener( 種類, 関数, false )

右クリックは　contextmenu　というイベント名で検知が出来るためそれを使う

contextmenu

イベントが発生して登録されたイベントハンドラやイベントリスナーが呼び出されると、一番目の引数に発生したイベントの情報が格納された Event オブジェクトが渡されてくるのでそれを利用する。

eventについて

if (event.target.tagName == 'IMG' && event.target.src.includes('neko'))
            event.preventDefault();

ここでは、取得したevent のタグが img タグだった場合かつ　取得した img タグの画像のソースに neko が含まれている場合は、右クリックを禁止するようにしている。なので、この条件にかからない場合は右クリックが禁止とならないので、猫以外の画像は右クリックが可能となる。

event.preventDefault();

これは、デフォルトの動作をキャンセルする動作なので、今回は、指定している contextmenu がデフォルトでは右クリックが可能となっているのをキャンセルするので false にすることで右クリックを禁止としている。