Layered elements with oncontextmenu bindings-CodePudding

Repro: https://jsfiddle.net/ssabc/cL6qxn1r/13/

I have a background element and a foreground element (you can think of it as a dialog popup on top of a canvas). When the user right-clicks on the foreground I would like to prevent the context menu from appearing in the background.

I tried binding a handler for the foreground's context menu and returning false from it to no avail:

document.getElementById('above').oncontextmenu = function(e) {
    e.preventDefault();
    return false;
}

As you can see in the JSFiddle, the oncontextmenu-event triggers on both elements. Here's a screenshot showing event firing in the background no matter which element is right-clicked

Is there any way to prevent the background event from firing?

CodePudding user response：

You just need to add

e.stopPropagation();

to your child element right click event handler. With the change, it would look like this:

document.getElementById('above').oncontextmenu = function(e) {
    e.preventDefault();
    e.stopPropagation(); // <=== add this
    getResultP().innerHTML  = '<li>Dialog oncontextmenu called</li>';
  return false;
}

This prevents the event from bubbling up the DOM tree. Read more about it here.