311

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

How is this done?

4
  • 10
    @systempuntoout No, this is a different question. The other question wants to "block right click without using javascript", this question simply wants to extend it with functionality (a lot of sites do this without annoying users successfully, e.g. Google docs)
    – bobobobo
    Nov 20, 2010 at 22:57
  • I would suggest using <a href="jquery.com/">JQuery</a>, <a href="beckelman.net/post/2008/11/04/… an example</a>
    – bobobobo
    Nov 20, 2010 at 23:01
  • 2
    @Bobobobo: That's right. I am aiming for UI extension, not restriction.
    – Giffyguy
    Nov 20, 2010 at 23:01
  • 1
    ctrl+click or cmd+click are also valid scenarios for this. Even though it is tightly coupled to the right click, this does not seem to be a complete duplicate since it treats context menu not right click. Right click is included in context menu, not the other way around. Jun 8, 2014 at 12:19

2 Answers 2

465

Use the oncontextmenu event.

Here's an example:

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

And using event listeners:

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.

5
  • 2
    Great code +1, I found even a slimmer way as well. 'oncontextmenu="chatMenu(event)" then just use e.preventDefault(e) when passing it in chatMenu :D This way, the ;return false; doesn't need to be passed for each new element (say for chat logs or whatnot) Mar 22, 2015 at 14:44
  • 14
    This only will handle the right click. If you want one event handler for all types of clicks, use the code above in conjunction with the following: var onMousedown = function (e) { if (e.which === 1) {/*Left Mouse*/} else if (e.which === 3) {/*Right Mouse*/} /*etc.*/ }; clickArea.addEventListener("mousedown", onMousedown); The contextmenu listener will allow the right click event through. Keep in mind that on Mac FF ctrl+rightclick will come through as a left mouse click, but on Mac Chrome ctrl+rightclick will come through as right mouse click.
    – N D
    Jan 28, 2016 at 17:27
  • 2
    wouldnt a missing return value not also being evaluated to false?
    – InsOp
    Aug 21, 2017 at 17:32
  • 3
    @InsOp no, if you want to prevent with return value, it must be false explicitly, skipping return or returning null does not prevent anything
    – jave.web
    Feb 4, 2020 at 23:27
  • If you change the return false command then it will allow right clicking, hence the command's name Apr 30, 2022 at 14:44
47

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(); >

3
  • 4
    I think you meant if ((e.which && e.which == 3) || (e.button && e.button == 2)).
    – Shea
    May 4, 2012 at 2:57
  • 12
    or just (e.which === 3 || e.button === 2)
    – ansiart
    Jan 17, 2013 at 21:41
  • 1
    that is old school, but it works almost everywhere. Nov 21, 2015 at 17:45

Not the answer you're looking for? Browse other questions tagged or ask your own question.