Disable Mouse Right click

How to disable mouse right click using javascript?

Most of the time we may need to disable mouse right click in our website in order to reduce any kind of malfunctions. In javascript we can do this very simply with a single step.

HTML :

<!DOCTYPE html>
<html>
<head>
	<title>Disable mouse right cick</title>
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
	<section class="banner">
	    <div class="container-fluid">
	        <div class="row">
	            <div class="col-lg-12">
	                <span class="text_1">Oops..! No right click..:(</span>  
	            </div>
	        </div>
	    </div>
	</section>
</body>
</html>

Just design a html page. Copy paste the above code and include the files also.

Bootstrap Css : https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css

Bootstrap js : https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js

jQuery js : https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

Add the below css for some extra styles

<style type="text/css">
		body{background: #000;}
.banner{position: absolute; text-align: center; top:50%; left:50%; transform:translate(-50%,-50%);}
.banner span{color: #fff; text-transform: uppercase; display: block; font-family:open sans;}
.banner .text_1{font-size: 60px; font-weight: 700; letter-spacing:8px; margin-bottom: 20px; background: #000; position: relative; animation: text 3s 1;     z-index: 999;}
.banner .text_2{ 
    font-size: 30px;
    color: #ff8d00;
    position: relative;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    
}
.text_2::before{ position: absolute;  content: ''; top:0;left: 0;width: 0;height: 100%;background-color: white; transform-origin:left;  transition:width 1s cubic-bezier(0.46, 0.03, 0.52, 0.96);  z-index:-1; overflow: hidden;}
.text_2:hover::before{width: 100%;}
.banner .text_2:hover{font-style: italic; color:#000; transition: ease 2s;}


@keyframes text{
    0%{
        color: black;
        margin-bottom: -40px;
        
    }
    30%{
        letter-spacing: 25px;
        margin-bottom: -40px;
    }
    80%{
        letter-spacing: 8px;
        margin-bottom: -40px;
    }
}
	</style>

Javascript :

<script type="text/javascript">
	document.addEventListener('contextmenu', event => event.preventDefault());

</script>

The preventDefault() method will cancel the event if it is cancelable, meaning that the default action that belongs to the event will not occur.

Hope this tutorial for disable mouse right click will help you.

For more javascript solutions please visit Javascript