禁用特定容器及其子项的上下文菜单

Question

I need to disable contextmenu only inside a specific div #wrapper and its children, and not the whole page. This is what I'm doing:

document.addEventListener('contextmenu', function (event) {
    console.log(event.target.id);
    if (event.target.id === 'wrapper') {
        event.preventDefault();
    }
});

.. but it doesn't seem to work.

Answer 1

You're approaching this the wrong way: you're adding the listener to the document , which may be ok, but it's easier to add it to the element itself, and you are checking event.target.id , which is the ID of the current clicked element (eg a children of your wrapper), not the wrapper.

To make this work you can easily do something like this instead:

var myWrapper = document.getElementById('wrapper');

myWrapper.addEventListener('contextmenu', function(e) {
    e.preventDefault();
}, true);

Answer 2

The code you have in your question works perfectly. One possibility of why the context menu still showed up is that you in fact clicked on a child of #wrapper , instead of clicking on the element itself:

HTML

<div id="wrapper">
    #wrapper

    <div class="inner">
        #wrapper .inner
    </div>
</div>

Working example demonstrating this issue on JSFiddle.

You can overcome this by attaching the event handler to the desired element directly instead. This way, right-click events on child-elements will bubble up to #wrapper , and thus fire the event as expected:

JavaScript

document.getElementById('wrapper').addEventListener('contextmenu', function (event) {
    event.preventDefault();
});

Working example on JSfiddle.

Answer 3

This is a solution that work fine

<div id="wrapper" oncontextmenu="return false">
#wrapper

<div class="childds">
    
</div>