ブラウザで「右クリック / デベロッパーツール / テキスト選択 / ドラッグコピー」の使用を禁止する Javascript を紹介します

運営しているサイトやブログの「画像をドラッグコピーされたくない」「右クリックを禁止したい」「テキスト選択コピーされたくない」そんなことってあると思います。

本記事で紹介する Javascript をコピーして運営サイトに貼り付けるだけで、

右クリックの禁止（コンテキストメニュー表示の禁止）
デベロッパーツールの禁止（F12 を押しても何も起こらない）
テキスト選択の一切を禁止
画像のドラッグコピーを禁止

PC ブラウザでの「4つの動作禁止」をまとめてサクッと実装することができます。

今回の記事内容

今回は、サイト閲覧の際に「右クリック / デベロッパーツール / テキスト選択 / ドラッグコピー」の使用を禁止する Javascript を紹介します。

まずは各動作を禁止する Javascript をバラで紹介します
【コピペ用】4つの動作を禁止する Javascript
動作確認用のデモページを用意しました
あとがき

まずは各動作を禁止する Javascript をバラで紹介します

右クリックを禁止

// 右クリックを禁止
document.addEventListener("contextmenu", function (event) {
  event.preventDefault();
});

// 右クリックを禁止

document.addEventListener("contextmenu", function (event) {

event.preventDefault();

});

このコードでは “contextmenu” イベントを用いて右クリックメニューの表示動作を禁止しています。

デベロッパーツールを禁止（F12 を押しても何も起こらない）

// デベロッパーツールを禁止 (F12キーを押しても何も起こらないようにする)
document.addEventListener("keydown", function (event) {
  if (event.keyCode === 123) {
    event.preventDefault();
  }
});

// デベロッパーツールを禁止 (F12キーを押しても何も起こらないようにする)

document.addEventListener("keydown", function (event) {

if (event.keyCode === 123) {

event.preventDefault();

}

});

このコードでは “keydown” イベントを用いてデベロッパーツールの表示動作を禁止しています。F12 キーでの表示動作も禁止します。

テキスト選択を禁止

// テキスト選択を禁止
document.addEventListener("selectstart", function (event) {
  event.preventDefault();
});

// テキスト選択を禁止

document.addEventListener("selectstart", function (event) {

event.preventDefault();

});

このコードでは “selectstart” イベントを用いてテキスト選択の動作を禁止しています。

画像のドラッグコピーを禁止

// 画像のドラッグコピーを禁止
document.addEventListener("dragstart", function (event) {
  var targetElement = event.target;
  if (targetElement.tagName === "IMG") {
    event.preventDefault();
  }
});

// 画像のドラッグコピーを禁止

document.addEventListener("dragstart", function (event) {

var targetElement = event.target;

if (targetElement.tagName === "IMG") {

event.preventDefault();

}

});

このコードでは “dragstart” イベントを用いて画像のドラッグコピー動作を禁止しています。

【コピペ用】4つの動作を禁止する Javascript

以下のコードを HTML にコピーして貼り付ければ OK です。

<script type="text/javascript">
  // 右クリック禁止
  document.addEventListener("contextmenu", function (event) {
    event.preventDefault();
  });

  // デベロッパーツールを禁止 (F12キーを押しても何も起こらないようにする)
  document.addEventListener("keydown", function (event) {
    if (event.keyCode === 123) {
      event.preventDefault();
    }
  });

  // テキストのドラッグを禁止
  document.addEventListener("selectstart", function (event) {
    event.preventDefault();
  });

  // 画像のドラッグコピーを禁止
  document.addEventListener("dragstart", function (event) {
    var targetElement = event.target;
    if (targetElement.tagName === "IMG") {
      event.preventDefault();
    }
  });
</script>