How to disable right-click context-menu in JavaScript

Question

Not that I'm trying to prevent 'View Source' or anything silly like that, but I'm making some custom context menus for certain elements.

EDIT: response to answers: I've tried this:

<a id="moo" href=''> </a>

<script type="text/javascript">
    var moo = document.getElementById('moo');

    function handler(event) {
        event = event || window.event;

        if (event.stopPropagation)
            event.stopPropagation();

        event.cancelBubble = true;
        return false;
    }

    moo.innerHTML = 'right-click here';

    moo.onclick = handler;
    moo.onmousedown = handler;
    moo.onmouseup = handler;
</script>

Right click is disabled, however, control-click is still active in Firefox. Please disable control-click or shift right click in Firefox. — Banwari Yadav, Oct 09 '17 at 07:04
Dark side-note - I've never seen a right-click script that would work on Opera, even if Opera is set to allow right-click intercepting (which is by default off). — Vilx-, Dec 19 '08 at 18:48
yeah, I intend on having alternate-although-less-convenient ways of accessing the same actions for Opera — Jimmy, Dec 19 '08 at 18:54

score 168 · Answer 1 · answered Jun 07 '13 at 15:19

168

If you don't care about alerting the user with a message every time they try to right click, try adding this to your body tag

<body oncontextmenu="return false;">

This will block all access to the context menu (not just from the right mouse button but from the keyboard as well)

However, there really is no point adding a right click disabler. Anyone with basic browser knowledge can view the source and extract the information they need.

answered Jun 07 '13 at 15:19

Omar Wagih

8,504
7
59
75

37

there is. For example if you are building a touch only web app, where anyway there isnt any right click. with your code, the developer can prevent ugly standard behavior like context menu popup. – gco May 17 '14 at 15:17
1

And also in my case: when you open a contextmenu you can right-click on the menuitem it self and it will open the default browser menu. That's really annoying, especially when your mouse is broken and will fire the right click twice. – GuyT Jul 04 '14 at 06:47
1

if you are using JQuery you can add it when page loads. $('body').attr('oncontextmenu','return false;') – mbokil Oct 30 '14 at 21:55
if you are using VanillaJS: document.body.addEventListener("contextmenu", function(evt){evt.preventDefault();return false;}); – Alex Jun 23 '17 at 23:40
@GuyT You can repair mice that are ghost-clicking with a little time and patience. The problem is that the internal switch has lost its tension. Open the mouse up, carefully open the switch with the ghosting button, remove and gently bend the tension wire a little bit, reassemble the rather tiny switch, close everything up, and you saved yourself anywhere from $20 to $150 on buying a new mouse. Find a tutorial for your particular make/model to know what to expect. It's not really the software's problem when the hardware is faulty. Logitech mice are notorious for ghost-clicking. – CubicleSoft May 16 '20 at 07:26
Thank you! I am implementing a drawing option with the mouse so this is really useful. – Tin Pritišanac Jan 08 '21 at 17:54
For the ones looking for the antidote: `ctrl+shift+rightclick`. At least on firefox it will show the standard right click menu ( [Ref link](https://superuser.com/a/1578695/910816) ) – Jannis Ioannou May 07 '23 at 19:42

Kenan Banks · Accepted Answer · 2008-12-19T18:58:10.837

128

Capture the onContextMenu event, and return false in the event handler.

You can also capture the click event and check which mouse button fired the event with event.button, in some browsers anyway.

edited Dec 19 '08 at 18:58

answered Dec 19 '08 at 18:48

Kenan Banks

207,056
34
155
173

1

Glad this worked. You'll definitely want to check this on all your target browsers though. – Kenan Banks Dec 19 '08 at 18:58
1

didn't seem to work for me on google chrome (my only target browser) – Tgwizman Jul 20 '12 at 18:36
77

Returning false from the event handler did not block the default context menu from appearing in Firefox or Chrome in my case. But calling event.preventDefault() did... Thought this might help. – Vikash Madhow Apr 08 '13 at 10:56
10

I had to use `event.preventDefault();` and `return false;` too in Chrome 77.0. – Tamás Bolvári Oct 12 '19 at 16:18
10

div.addEventListener("contextmenu", ( e )=> { e.preventDefault(); return false; } ); This worked for me in FF and Chrome. – Chadd Frasier Feb 05 '20 at 19:36

score 21 · Answer 3 · answered Aug 17 '13 at 14:02

I have used this:

document.onkeydown = keyboardDown;
document.onkeyup = keyboardUp;
document.oncontextmenu = function(e){
 var evt = new Object({keyCode:93});
 stopEvent(e);
 keyboardUp(evt);
}
function stopEvent(event){
 if(event.preventDefault != undefined)
  event.preventDefault();
 if(event.stopPropagation != undefined)
  event.stopPropagation();
}
function keyboardDown(e){
 ...
}
function keyboardUp(e){
 ...
}

Then I catch e.keyCode property in those two last functions - if e.keyCode == 93, I know that the user either released the right mouse button or pressed/released the Context Menu key.

Hope it helps.

score 3 · Answer 4 · answered Dec 19 '08 at 18:59

If your page really relies on the fact that people won't be able to see that menu, you should know that modern browsers (for example Firefox) let the user decide if he really wants to disable it or not. So you have no guarantee at all that the menu would be really disabled.

score 2 · Answer 5 · answered Dec 19 '08 at 19:01

2

You can't rely on context menus because the user can deactivate it. Most websites want to use the feature to annoy the visitor.

answered Dec 19 '08 at 19:01

stesch

7,202
6
47
62

5

What should one who is pure of heart do then? I am doing a html5 game and right clicking disrupts the flow of that. – Colin Smith Aug 11 '20 at 11:27
@ColinSmith I'd say that if your game is fullscreen, disable it with : `, and if not, disable when the user's mouse is on the game area. – Fighter178 May 23 '23 at 03:03

How to disable right-click context-menu in JavaScript

5 Answers5

Linked

Related