How to disable right click on the webpage using JavaScript?

1 4502

To protect the content like images on a web page or to protect the source code or for other security reasons, we need to disable the right click on the web page. Through this blog, I am explaining the procedure to disable the right click with JavaScript.

There are many methods to achieve this. HTML DOM addEventListener() and preventDefault() methods are some of these procedure.

This code will disable the right click by adding an event listener for the "contextmenu event". This code will help you in protecting your web-page.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to disable right click on webpage using JavaScript</title>
<style>
.main-div h1
{
 font-size: 21px;
}
</style>
  </head>
  <body>
   <div class="main-div">
   <h1>Disabling right click on webpage using JavaScript</h1>

<script type="text/javascript">
//Script for disabling right click on mouse
var message="Function Disabled!";
function clickdsb(){
if (event.button==2){
alert(message);
return false;
}
}
function clickbsb(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickbsb;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickdsb;
}

document.oncontextmenu=new Function("alert(message);return false")

</script>
</div>
</body>
</html>

Output:

Before disabling the Right Click: