Post
Ask Question

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

image1.gif

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

image2.gif

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.

<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>

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

<script type="text/javascript" language="javascript">

        $(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">

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

<head>

    <title></title>

<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>

   <script type="text/javascript" language="javascript">

        $(function () {

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

                e.preventDefault();

            });

        });

    </script

</head>

<body>

    <form id="form1" runat="server">

    <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.

 

disable1.gif

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.  

<script type='text/javascript'>

        $(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.

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">

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

<head>

    <title></title>

    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>

    <script type='text/javascript'>

        $(document).ready(function () {

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

                return false;

            });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <h3>

            Disable Right Click</h3>

        Rohatash Kumar<br />

        <img alt="" src="Esplorer2.jpg" />

    </div>

    </form>

</body>

</html>

The above code also disables right-click function, the same as shown in the step1.

Resources


Similar Articles