Disable Right Click Easily using jQuery

I’ve seen allot of posts on forums on how to disable the right click event in JavaScript. Well the solution is pretty straight forward if you use jQuery! The trick is to bind to the contextmenu event. The code below is an example of how to do this.

<html xmlns="http://www.w3.org/1999/xhtml" >
<
head>
<
title>jQuery disable right click easily</title>
<
script language="javascript" type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</
script>
<
script type="text/javascript" language="javascript">
$(function() {
$(this).bind("contextmenu", function(e) {
e.preventDefault();
});
});
</script>
</
head>
<
body>
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis.
Nam bibendum. In nulla tortor, elementum vel, tempor at,
varius non, purus. Mauris vitae nisl nec consectetuer.
Donec ipsum. Proin imperdiet est. Phasellus dapibus semper
urna. Pellentesque ornare, orci in consectetuer hendrerit,
urna elit eleifend nunc, ut consectetuer nisl felis ac diam.
Etiam non felis. Donec ut ante. In id eros.
</body>
</
html>



See a Live Demo






About The Author

Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET and regular presenter at conferences and user groups throughout Australia. Being an ASP.NET Insider, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with JavaScript. He also blogs regularly at DotNetCurry.com. Follow him on twitter @malcolmsheridan

20 comments:

Anonymous said...

I personally don't think it is a good idea to do this. Right-Click is an established and accepted user behavior, it is not our place as developers to limit this type of action, if anything we should only try to enhance these aspects of the user experience.

Unknown said...

I totally agree with anonymous. Why would you want to disable the context menu in the first place. I thought we got over this stupid practice on the web years ago.

Anonymous said...

Great Snippet !! Even now context is being disabled for right click in many of banking and other applications. Yes Developers love to give freedom but not at the cost of application security.

Thanks for the snippet.. once again

gdlsystems said...

Great simple solution! I totally agree with Anonymous in the fact that we should not disable context menu since it is an standard way of using the web. However there are customers that even when they are told to not do so they still want to disable the context menu.

Kaleem Khan said...

How to enable it back again? In my case I'm using jQuery (plug-in) context menu on right click for grid options. When cliced on a new row, the original menu should come back for the rest and jQuery contextMenu shuoud be displayed only for the most recent right click row.

Malcolm Sheridan said...

@firehose911
You could try bindind to specific elements instead of $(this). Try that.

who me??? said...

i just need to disable the right click when a user right clicks on the page and does a refresh.

But when i use the above code it disables all the right clicks even the ones on the text boxes. which only shows cut copy paste Delete and select all..

any idea if i can retain those and only disable the main Context menu of just the page.

Anonymous said...

I partially agree with Anon, there are a lot of web driven applications where disabling right click has its benefits. However, For standard websites the context menu has its place.

sadettin said...

tnx my friend good work ;)

Unknown said...

jQuery and mootools

i love both :)

Anonymous said...

It's 2010 now and I have a client that is paranoid about his images being stolen, thus requested the RMB to be removed :-)

who me??? said...

hey dude there are 2 easy way to fix that issue.

I. USE FLASH + XML to display images. you get free source of such Flash galleries.

OR
USE CSS
1. Create a 1x1 px image
2. Create a div container and place the image inside it and give it the height and width of the image that u are going to post.
3. Use javascript/ any other language and apply a css with image path dynamically to the blank Image.

njoy...

Anonymous said...

I just need to say that disabling Right Click doesn't do much.

If the user got Firebug (Addon to Firefox) he can get all content of a page a lot easier without having to right-click the site.

And it's rather annoying having it disabled too for the user. :)

But for anyone who finds it usefull; Cheers!

Ferreira Mike said...

Disabling right click is a matter of security? The last time I heard something completely random like that was when the US told us the leaked cables were a threat to national security.

Seriously guys, WHAT exactly is impeding me from simply disabling Javascript? Or edit the files locally to remove the bits of code I want removed? Or install Grease-monkey? Or go to 'Site-properties' (Firefox) and view the sources one by one? Or make a print screen (for those who think that pictures are safe)? Or even take a picture of my damn monitor, for christ sake?!

I actually never cared about other people's pictures but when I need something from my context menu and have to read a stupid dialog box saying 'nono, don\'t be stealing my pictures!' instead, I die a little bit on the inside. I usually then proceeded to steal the image I wouldn't ever care about otherwise, add a caption, upload it somewhere and send them a link to it.

Seriously people, stop this! It isn't preventing anything but it sure is getting people angry! If you want something safe, there is .htaccess. What you can't protect with .htaccess isn't safe anyways.

Anonymous said...

I agree with most people that disabling right click is really annoying for users, but There ARE cases where disabling right click makes sense.
Imagine a browser game, where you drag the map via right click. And what about Google maps? It totally makes sense to create a custom context menu on the map, because why would a user do a "normal" right click on the map?

Anyway, I just wanted to thank the author for sharing the code with us. It's you choice if your use it or not.

Weejock said...

Totally agree with Ferreira Mike, my 6 year-old got around right-click disabled in 2 mins flat.

C'mon people, if you don't want your content copied, don't put it on the web. Attempting to protect it is just a waste of everybody's time.

I can't see any benefits to disabling standard context menus. With a greasemonkey script I can get the best of both worlds on Google Maps. If some anonymous scriptkid can achieve that why can't Google?.

Anonymous said...

Hiding content isn't the only reason to disable right click. I'm currently looking for a way to disable the context menu in a flash tutorial that emulates the M$ office environment. We need to prevent the context menu to enable the office menu to appear cleanly. Unfortunately, this solution doesn't seem to work for that purpose. Nor does:

$(selector).mousedown(function(e){
if(e.which == 3) e.preventDefault;
})

The above works for IE, but when you switch to FF or Chrome, the flash context menu is back... ugh...

Anonymous said...

You should think before telling not to disable right-click. As an example i use the disable right click on back-end to display an other context menu only for admin to display properties of a specific clicked item.

It always depends on the way we use it. For normal websites right should never be disabled unless it has a right meaning to do so.

Evolución said...

Todo esto es muy interesante pero la verdad es que no entiendo mucho pero me gustaria saber más.

Anonymous said...

Yeah, I'm not using it as a matter of security but more to build a different function into the site. Pretty much each image gives you three different options, click, dblclick, and right click. Client wanted different functionality for each, and they never cared for the original context menu.