Nikolaos Kantzelis ASP.Net Blog

This blog will focus on ASP.NET Framework

Sponsors

About Me

Great Blogs

Disabling the right-click sub menu using JQuery

Recently I needed to disable the right-click contextual menu in an HTML page for a very simple HTML application I was creating for a friend.

This is going to be a short post where I will demonstrate how to disable the right-click contextual menu.

I will use the very popular JQuery Library. Please download the library (minified version) from http://jquery.com/download

Please find here all my posts regarding JQuery.

In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here. 

I am going to create a very simple HTML 5 page with some text and an image.

The HTML markup for the page follows. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>HTML 5, CSS3 and JQuery</title>
   
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <link rel="stylesheet" type="text/css" href="style.css">
     <script type="text/javascript" src="jquery-1.8.2.min.js">
        </script>
<script type="text/javascript">

 (function ($) { $(document).bind('contextmenu', function () { return false;
}); })(jQuery);

</script>
    
  </head>
  <body>
 
    <div id="header">
      <h1>Learn cutting edge technologies</h1>
      <h2>HTML 5, JQuery, CSS3</h2>
    </div>
  
   <figure>
  <img src="html5.png" alt="HTML 5">
</figure>
   
    <div id="main">
   
      <h2>HTML 5</h2>
       
     
          <article>
          <p>
            HTML5 is the latest version of HTML and XHTML. The HTML standard defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML.
          </p>
          </article>
      </div>   
   
  
  </body>
 
</html>

This is the JQuery code, I use



 (function ($) { $(document).bind('contextmenu', function () { return false;
}); })(jQuery);



I simply disable/cancel the contextmenu event.When I load the simple page on the browser and I right-click the context menu does not appear.

Hope it helps!!!

Posted: Oct 14 2012, 09:38 PM by nikolaosk | with 2 comment(s) |
Filed under: , ,

Comments

Kidwell said:

Thanks , I've recently been looking for information about this topic for ages and yours is the best I have discovered so far. But, what in regards to the conclusion? Are you sure about the source?

# October 17, 2012 1:17 AM

Fortier said:

Hi there, I enjoy reading through your article post.

I like to write a little comment to support you.

# October 17, 2012 6:21 AM