Jquery/JS prevent right click menu in browsers

Question

I have my div with a right click popup menu:

// Attatch right click event to folder for extra options
$('#fBox' + folderID).mousedown(function(event) {
    if (event.which == 3) {

        // Set ID
        currRClickFolder = folderID;

        // Calculate position to show popup menu
        var height = $('#folderRClickMenu').height();
        var width = $('#folderRClickMenu').width();
        leftVal = event.pageX - (width / 2) + "px";
        topVal = event.pageY - (height) + "px";
        $('#folderRClickMenu').css({ left: leftVal, top: topVal }).show();

    }
});

But the browser for this element still pops up the default menu (copy/paste/properties etc). Any way to disable this? I've tried return false but not luck.

what is folderID, is this code under a loop or something else? or maybe you need preventDefault()? — Mohammad Ali Akbari, Feb 07 '11 at 10:33
It's in a function that creates a folder dynamically. The folder ID is a unique ID for the folder. — Tom Gullen, Feb 07 '11 at 10:34

score 113 · Accepted Answer · answered Feb 07 '11 at 10:32

113

You can disable the right click by appending oncontextmenu="return false;" to your body tag.

<body oncontextmenu="return false;">

answered Feb 07 '11 at 10:32

Arseny

5,159
4
21
24

7

I don't want to disable it for every element as it will be too obtrusive to the user, just the elements I specify is what I want. – Tom Gullen Feb 07 '11 at 10:33
21

did you try adding it to the parent of fbox instead of body ? – Shrinath Feb 07 '11 at 10:39
5

Excellent thanks! oncontextmenu="return false;" assigned to the container div worked a treat. – Tom Gullen Feb 07 '11 at 10:48
This does not work in Firefox 10+; Neither setting it on the body or the parent element. It works in Chrome 17 and IE8. – ghbarratt Mar 06 '12 at 21:58
This works, if you want backward compatibility then better go back to 90s. – Sanket Sahu Jul 10 '13 at 08:40
1

Works for me on a div element in Firefox 33, and even by assigning it dynamically with jquery: jZone.attr("oncontextmenu", "return false;"); – ling Nov 09 '14 at 11:36
Thanks @aruseni, this solution really helps. I just wonder how things works for the context menu? Do I need to ban it only at the parent container or I need to ban it on every possible element inside the container? Will that vary from browser to browser? – yeelan Mar 25 '15 at 13:31
is there a more stylish way to do this i.e. adding a listener? – Levent Yumerov Apr 25 '16 at 09:10
works perfectly in chrome and in firefox latest version. – zookastos Feb 12 '18 at 02:12

Arsen K. · Answer 2 · 2016-09-21T07:18:50.230

46

You can disable context menu on any element you want:

$('selector').contextmenu(function() {
    return false;
});

To disable context menu on the page completely (thanks to Ismail), use the following:

$(document).contextmenu(function() {
    return false;
});

edited Sep 21 '16 at 07:18

answered Jan 07 '14 at 13:31

Arsen K.

5,494
7
38
51

1

* worked for the whole page but the specific selector option did not. – Mych Apr 30 '14 at 12:33
5

$('*') selectors are verry heavy use $(document) – Ismail Jun 03 '15 at 22:17

score 13 · Answer 3 · answered May 09 '13 at 14:10

13

One jQuery line:

$('[id^="fBox"]').on("contextmenu", function(evt) {evt.preventDefault();});

answered May 09 '13 at 14:10

KrisWebDev

9,342
4
39
59

Sang Suantak · Answer 4 · 2011-02-07T10:43:24.120

8

Try this:

$('#fBox' + folderID).bind("contextmenu", function () {
                alert("Right click not allowed");
                return false;
            });

edited Feb 07 '11 at 10:43

answered Feb 07 '11 at 10:35

Sang Suantak

5,213
1
27
46

The alert blocks the menu, but it also blocks all other code from running – Tom Gullen Feb 07 '11 at 10:47
2

If you want rest of the code to run use preventDefault() instead of return false. Return false stops all event propagation but preventDefault() will stop the current event and continue executing rest of the code. – Sang Suantak Feb 07 '11 at 10:54

score 4 · Answer 5 · answered Feb 07 '11 at 10:42

Try...

$('[id^="fBox"]').mousedown(function(event) {
    if (event.which == 3) {
        event.preventDefault();
        // Set ID
        currRClickFolder = $(this).attr('id').replace('fBox','');

        // Calculate position to show popup menu
        var height = $('#folderRClickMenu').height();
        var width = $('#folderRClickMenu').width();
        leftVal = event.pageX - (width / 2) + "px";
        topVal = event.pageY - (height) + "px";
        $('#folderRClickMenu').css({ left: leftVal, top: topVal }).show();

    }
});

if you have any dynamic creation of these boxes then...

$('[id^="fBox"]').live('mousedown',function(event) {
    ...
});

score 3 · Answer 6 · answered Jun 18 '13 at 15:51

I agree with @aruseni, blocking oncontextmenu at the body level you'll avoid the standard context menu on the right click for every element in the page.

But what if you want to have a finer control?

I had a similar issue and I thought I've found a good solution: why not attaching directly your context menu code to the contextmenu event of the specific element(s) you want to deal with? Something like this:

// Attatch right click event to folder for extra options
$('#fBox' + folderID).on("contextmenu", function(event) {
  // <-- here you handle your custom context menu
  // Set ID
  currRClickFolder = folderID;

  // Calculate position to show popup menu
  var height = $('#folderRClickMenu').height();
  var width = $('#folderRClickMenu').width();
  leftVal = event.pageX - (width / 2) + "px";
  topVal = event.pageY - (height) + "px";
  $('#folderRClickMenu').css({ left: leftVal, top: topVal }).show();

  event.stopImmediatePropagation();
  return false; // <-- here you avoid the default context menu
});

Thus you avoid handling two different events just to capture the context menu and customize it :)

Of course this assumes you don't mind having the standard context menu displayed when someone clicks the elements you didn't select. You might as well show different context menus depending on where users right-click..

HTH

good idea to use "contextmenu" event instead of having to use "mousedown" and then identify right click... — lepe, Sep 18 '13 at 00:46

score 2 · Answer 7 · answered Nov 06 '12 at 23:12

2

Using jQuery:

$('[id^="fBox"]').bind("contextmenu",function(e){
    return false;
});

Or disable context menu on the whole page:

$(document).bind("contextmenu",function(e){
    return false;
});

answered Nov 06 '12 at 23:12

kachar

2,310
30
32

Mirosław Karczmarczyk · Answer 8 · 2013-10-18T07:52:30.157

2

For me

$('body').on('contextmenu',function(){return false;});

jQuery does the job :)

edited Oct 18 '13 at 07:52

answered Oct 18 '13 at 07:47

Mirosław Karczmarczyk

227
1
11

score 2 · Answer 9 · answered Feb 07 '11 at 10:36

2

This is a default behavior of browsers now to disable the alternate-click override. Each user has to allow this behavior in recent browsers. For instance, I don't allow this behavior as I always want my default pop-up menu.

answered Feb 07 '11 at 10:36

Olivier Grégoire

33,839
23
96
137

score 1 · Answer 10 · answered Jan 03 '18 at 23:53

Here's a way I used recently (using a little jQuery too,) when I was running into a problem with it. Since the mousedown event occurs before the contextmenu, this trick seems to catch it, which is attaching a body level oncontextmenu handler to return false temporarily in the mousedown event, perform your desired action, then as an important part, remember to remove the handler afterward.

This is just part of my code extracted out, as an example...

$(div)
    .mousedown(function (e) {
        if (!leftButtonPressed(e)) {
            disableContextMenu(true);
            showOptions({ x: e.clientX, y: e.clientY }, div); // do my own thing here
        }
    });

When my showoptions() rtn finishes, a callback function is run and it calls the disable-rtn again, but with 'false':

disableContextMenu(false);

Here's my disableContextMenu() rtn:

function disableContextMenu(boolDisable, fn) {
    if (boolDisable) {
        $(document).contextmenu(function (e) {
            if (fn !== undefined) {
                return fn(e);
            } else {
                return false;
            }
        });
    } else {
        $(document).prop("oncontextmenu", null).off("contextmenu");
    }
}

score 1 · Answer 11 · answered Feb 07 '11 at 10:34

// Attatch right click event to folder for extra options
$('#fBox' + folderID).mousedown(function(event) {
    if (event.which == 3) {
        event.preventDefault();
        // Set ID
        currRClickFolder = folderID;

        // Calculate position to show popup menu
        var height = $('#folderRClickMenu').height();
        var width = $('#folderRClickMenu').width();
        leftVal = event.pageX - (width / 2) + "px";
        topVal = event.pageY - (height) + "px";
        $('#folderRClickMenu').css({ left: leftVal, top: topVal }).show();

    }
});

No luck, I add this after the div is added to the DOM but it still shows the menu — Tom Gullen, Feb 07 '11 at 10:36

score 1 · Answer 12 · answered Nov 19 '19 at 10:03

1

There’s many Javascript snippets available to disable right-click contextual menu, but JQuery makes things a lot easier:

    $(document).bind("contextmenu",function(e){
        return false;
    });
});

answered Nov 19 '19 at 10:03

Jerry King

454
4
6

Jquery/JS prevent right click menu in browsers

12 Answers12

Linked