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/downloadPlease 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!!!
