How can I capture the right-click event in JavaScript?

javascript html events event-handling dom-events
Giffyguy picture Giffyguy · Nov 20, 2010 · Viewed 304.3k times · Source

I want to block the standard context menus, and handle the right-click event manually.

How is this done?

Answer

Chase picture Chase · Nov 21, 2010

Use the oncontextmenu event.

Here's an example:

<div oncontextmenu="javascript:alert('success!');return false;">
    Lorem Ipsum
</div>

And using event listeners (credit to rampion from a comment in 2011):

el.addEventListener('contextmenu', function(ev) {
    ev.preventDefault();
    alert('success!');
    return false;
}, false);

Don't forget to return false, otherwise the standard context menu will still pop up.

If you are going to use a function you've written rather than javascript:alert("Success!"), remember to return false in BOTH the function AND the oncontextmenu attribute.

Related questions

Handling "onclick" event with pure JavaScript

So this is really straight forward but I'm still fairly new to JavaScript and just found JSFiddle. I'm trying to find the element with the getElementById() to disable and enable a button. What am I missing? <form name="frm" &…

Read More
Getting value of HTML Checkbox from onclick/onchange events

<input type="checkbox" onclick="onClickHandler()" onchange="onChangeHandler()" /> From within onClickHandler and/or onChangeHandler, how can I determine what is the new state of the checkbox?

Read More
How to stop event propagation with inline onclick attribute?

Consider the following: <div onclick="alert('you clicked the header')" class="header"> <span onclick="alert('you clicked inside the header');">something inside the header</span> </div> How can I make it so …

Read More