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

JavascriptHtmlEventsEvent HandlingDom Events

Javascript Problem Overview


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

How is this done?

Javascript Solutions


Solution 1 - Javascript

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](https://stackoverflow.com/questions/4235426/how-can-i-capture-the-right-click-event-in-javascript/4236294#comment6115096_4236294 "CC BY-SA 2.5")):

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.

Solution 2 - Javascript

I think that you are looking for something like this:

   function rightclick() {
	var rightclick;
	var e = window.event;
	if (e.which) rightclick = (e.which == 3);
	else if (e.button) rightclick = (e.button == 2);
	alert(rightclick); // true or false, you can trap right click here by if comparison
}

(http://www.quirksmode.org/js/events_properties.html)

And then use the onmousedown even with the function rightclick() (if you want to use it globally on whole page you can do this <body onmousedown=rightclick(); >

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionGiffyguyView Question on Stackoverflow
Solution 1 - JavascriptChase FinchView Answer on Stackoverflow
Solution 2 - Javascriptcyber-guardView Answer on Stackoverflow