Disable mouse right click using jQuery

Introduction

In this article we will learn how to disable the mouse right click using jQuery which provides security to our HTML source code along with providing the security by being copied or pasted directly in form control.

Note

  • To use jQuery in an ASP.Net form you need to add the reference for the jQuery library that is nothing but a JavaScript file.
  • You can download the latest jQuery library from http://jquery.com/download/.

I hope, you have downloaded the above jQuery library for referencing a page because whenever we use any jQuery code then it must give the jQuery library file reference into the page.

Let us Create the web application in asp.net to demonstrate the requirement by creating the web application as

  1. “Start” – “All Programs” – “Microsoft Visual Studio 2010″
  2. “File” – “New Website” – “C# – Empty website” (to avoid adding a master page).
  3. Give the web site a name, such as Validation or whatever you wish and specify the location.
  4. Then right-click on the solution in the Solution Explorer then select “Add New Item” – “Default.aspx page”.

I hope,you have created the page now, let us create the Jquery function to disable the mouse write click as

$(function()

{

$(this).bind(“contextmenu”, function(e)

{

e.preventDefault();

});

});

now add the jQuery library file reference at the head section of the page, the jquery function and jQuery library file will look like the following:

<head id=”Head1″ runat=”server”>

<title></title>

<script src=”Jquery-1.8.0.min.js” type=”text/JavaScript“></script >

<script type=”text/JavaScript”>

$(function()

{

$(this).bind(“contextmenu”, function(e)

{

e.preventDefault();

alert(“right click is disabled”); //not recommended to give alert message
});

});

</script >

</head>

 now the whole code is a follows
 

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head id=”Head1″ runat=”server”>

<title></title>

<script src=“Jquery-1.8.0.min.js” type=“text/JavaScript”></script >

<script type=“text/JavaScript”>

$(function()

{

$(this).bind(“contextmenu”, function(e)

{

e.preventDefault();

alert(“right click is disabled”); //not recommended to give alert message

});

});

</script >

</head>

<body>

<form id=”form1″ runat=”server”>

<div>

</div>

</form>

</body>

</html>

 now run the application, and click on the mouse right button, it will show the following message as
 
http://apnapurvanchal.com/wp-content/uploads/2013/12/browserright.jpg 
 Note

It's not good to provide the alert message after the right click because of the reason that we are disabling the right click of the mouse for security purpose but by showing the alert message we are exposing our own security by telling the hacker or the spammer that i have disabled the right click, so it is better that we always avoid the right click alert message.

Advantages of using JQuery to disable right click

  1. JQuery gets support on every browser where as JavaScript failed for Sony Ericsson browser .
  2. Many a times, providing the alert message and disabling the right click of the mouse does not help because three attempts of clicking on the right click of the mouse once again enables the right click, so it's better to use Jquery.

Summary

I hope this small trick is useful for all the readers, if you have any suggestions regarding this article then please contact me.