JavaScriptで右クリックと画像ドラッグ（保存）を禁止にする方法【oncontextmenu、onselectstart、onmousedown】

JavaScriptのoncontextmenu、onselectstart、onmousedownを使ってページ上で右クリックと画像のドラッグ（保存）を禁止にする方法をご紹介します。

JavaScriptで右クリックと画像ドラッグ（保存）を禁止にするCSSの記述

※必要に応じて変更して下さい。

<style type="text/css">
body{
  text-align: center;
  font-size: 16px;
}
h1{
  text-align: center;
  font-size: 32px;
  line-height: 1.6em;
  padding: 30px 0;
}
</style>

JavaScriptで右クリックと画像ドラッグ（保存）を禁止にするHTMLの記述

※ドラッグ禁止用の画像（dummy1.jpg）を用意しました。必要に応じて変更して下さい。

<h1>このページでは右クリックと以下の画像のドラッグも禁止にしてます。<br>試しに右クリックと画像のドラッグをやってみてください。</h1>

<div><img src="dummy1.jpg" alt="右クリック＋画像ドラッグ禁止"></div>

oncontextmenu、onselectstart、onmousedownを使ってページ上で右クリックと画像のドラッグ（保存）を禁止にするJavaScriptの記述

※document全体とbody要素に対して.oncontextmenuで右クリック禁止にし.onselectstarttと.onmousedownでマウス等によるページ上でのドラッグを禁止してます。

<script type="text/javascript">
//右クリック禁止
document.oncontextmenu = function(){ return false; };
document.body.oncontextmenu = "return false;"

//ドラッグ禁止
document.onselectstart = function(){ return false; };
document.onmousedown = function(){ return false; };
document.body.onselectstart = "return false;"
document.body.onmousedown = "return false;"
</script>

oncontextmenu、onselectstart、onmousedownを使って右クリックと画像のドラッグを禁止にしたデモページ

oncontextmenu、onselectstart、onmousedownを使って右クリックと画像のドラッグを禁止にしたデモページ

　

※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。