DotNetStories
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!!!