Preventing Right-Click on Web Page Using JQuery

This article explains how to disable the right-click function using jQuery. We can prevent right-click using jQuery in many ways. In this article we will explain two ways to prevent right-click function using jQuery. Here, we will create a website application and add a new page to the website. After that drag and drop an image control onto the page and using jQuery we disable right-click. If you like to add this feature to your site, then follow the steps below.

First you have to create a web site.

Go to Visual Studio 2010
New-> Select a website application
Click OK

Now add a new page to the website.

Go to the Solution Explorer
Right-click on the Project name
Select add new item
Add new web page and give it a name
Click OK

Now the script code, which you have to add inside the <script></script> tags, will be paced either in the head section or the body section as you prefer.

Step 1 : We just need to bind the contextmenu event with the document element. In the head section we copy the following code.

$(function () {

$(this).bind("contextmenu", function (e) {

e.preventDefault();

});

</script

In this step we will see the complete code for the .aspx page; let us see the code given below.

Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="disableclick.aspx.cs" Inherits="disableclick" %>

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

<head>

$(function () {

$(this).bind("contextmenu", function (e) {

e.preventDefault();

});

</script

</head>

<body>

<div>

<h3>

Disable Right Click</h3>

Rohatash Kumar<br /><img alt="" src="Esplorer2.jpg" />

</div>

</form>

</body>

</html>

Now test the application with a right-click.

Step 2 : We have defined e.preventDefault() method in the step1. We just need to bind the contextmenu event with the document element and replace return false in place of e.preventDefault(). In the head section we copy the following code.

$(document).ready(function () {

$(document).bind("contextmenu", function (e) {

return false;

});

</script>

In this step we will see the complete code for the .aspx page let see the code given below.