Question

// this works

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

// without the code above, this works too

$(document).on('contextmenu', '#special', function() {
    alert('#special right clicked');
});

How can I combine these 2 pieces of code so that I can disable context menu on the whole document except the one with id #special.

Answer 1

$(document).on('contextmenu', function(e) {
    if (!$(e.target).is("#special"))
       return false;

    alert('#special right clicked');
    // you may want e.preventDefault() here
});

Using the .is() method lets you test whether the clicked element matches any selector, which is basically what your original delegated .on() call did behind the scenes, but if you’re checking for an element id specifically it would be more efficient to say:

if (e.target.id != "special")
    return false;