Modify right-click menu browser behavior

Recently I've discovered that it's very easy to either completely disable right-click context senstive menus or replace them with a custom dialog. While it's not normally a good idea to remove or change the right-click menu, sometimes it makes sense for a specific application. This post shows how to do it.

To disable the right click menu you need to override a handler of the 'contextmenu' event. With jQuery it's easy, for the page as a whole and for just a particular element:

To show custom menu on right click let's define it's structure and style:


Now we just have to define the 'contextmenu' event handler. It is convenient to do it right after the DOM is ready:

The second function just hides the menu if you click anywhere beyond its. The 'rclick-demo' id is the following div. So just try how it works:

to view the context menu right click here

In the end I just want to say that actually you don't have to code anything that I have done. Because there is already pretty nice jQuery plugins that can do all the work for you.
http://abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin
http://www.trendskitchens.co.nz/jquery/contextmenu

• Edit
• Delete
• Run