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