300

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

How is this done?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Giffyguy
  • 20,378
  • 34
  • 97
  • 168
  • 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 '10 at 22:57
  • 2
    @Bobobobo: That's right. I am aiming for UI extension, not restriction. – Giffyguy Nov 20 '10 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. – Vlad Nicula Jun 08 '14 at 12:19
  • I would suggest using JQuery, Here's an example – bobobobo Nov 20 '10 at 23:01

2 Answers2

453

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.

Frenchcooc
  • 910
  • 6
  • 20
Chase Finch
  • 5,161
  • 1
  • 21
  • 20
  • 1
    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) – NiCk Newman Mar 22 '15 at 14:44
  • 12
    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 '16 at 17:27
  • 1
    wouldnt a missing return value not also being evaluated to `false`? – InsOp Aug 21 '17 at 17:32
  • 1
    @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 04 '20 at 23:27
  • If you change the `return false` command then it will allow right clicking, hence the command's name – RixTheTyrunt Apr 30 '22 at 14:44
43

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

cyber-guard
  • 1,776
  • 14
  • 30