55

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.

2
  • 1
    what is folderID, is this code under a loop or something else? or maybe you need preventDefault()? Feb 7, 2011 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 7, 2011 at 10:34

12 Answers 12

113

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

<body oncontextmenu="return false;">
9
  • 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 7, 2011 at 10:33
  • 21
    did you try adding it to the parent of fbox instead of body ?
    – Shrinath
    Feb 7, 2011 at 10:39
  • 5
    Excellent thanks! oncontextmenu="return false;" assigned to the container div worked a treat.
    – Tom Gullen
    Feb 7, 2011 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 6, 2012 at 21:58
  • 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 9, 2014 at 11:36
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;
});
2
  • 1
    * worked for the whole page but the specific selector option did not.
    – Mych
    Apr 30, 2014 at 12:33
  • 5
    $('*') selectors are verry heavy use $(document)
    – Ismail
    Jun 3, 2015 at 22:17
13

One jQuery line:

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

Try this:

$('#fBox' + folderID).bind("contextmenu", function () {
                alert("Right click not allowed");
                return false;
            });
2
  • The alert blocks the menu, but it also blocks all other code from running
    – Tom Gullen
    Feb 7, 2011 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. Feb 7, 2011 at 10:54
4

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) {
    ...
});
3

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

1
  • 1
    good idea to use "contextmenu" event instead of having to use "mousedown" and then identify right click...
    – lepe
    Sep 18, 2013 at 0:46
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.

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;
});
2

For me

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

jQuery does the job :)

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

    }
});
1
  • No luck, I add this after the div is added to the DOM but it still shows the menu
    – Tom Gullen
    Feb 7, 2011 at 10:36
1

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");
    }
}
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;
    });
}); 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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