Javascript toggle default and custom contextmenu on right-click

Question

I want to display a custom conext menu when user right-clicks on certain elements on the page i.e. table. As of now, I have both custom and default context menu display.

function element_right_clicked(sender,e){
if(e.which == 3){
      // code here that displays custom menu
      sender.addEventListener("contextmenu", e => {
        e.preventDefault();
    });
  }
}

I am looking for a way, not to display default menu when custom is shown.

Is there a specific issue you're having with the code you included? — Dave
– Dave, Commented Jul 31, 2020 at 17:15
In which situation should the normal context menu show, or your custom menu ? — nip
– nip, Commented Jul 31, 2020 at 17:16
Please create a fiddle or sandbox if you can show this problem at runtime. — Asutosh
– Asutosh, Commented Jul 31, 2020 at 17:19
Why not just apply the event listener to just those elements, rather than window? — Scott Marcus
– Scott Marcus, Commented Jul 31, 2020 at 18:08

Scott Marcus · Accepted Answer · 2020-08-01 13:57:06Z

Simply set up the handler to only work on those elements that you need the custom menu to appear. You can do this easily by applying a class to any element that is supposed to use the custom menu and then listening for the right-click at the document level and leveraging event delegation.

The red items below are configured for a custom right-click.

let modal = document.getElementById("contextMenu");

// Set up an event handler for the documnt right click
document.addEventListener("contextmenu", function(event) {
  // Only do something when the element that was actually right-clicked
  // on has the right class to trigger the menu
  if(event.target.classList.contains("customMenu")){
    event.preventDefault();
    modal.classList.remove("hidden");
  }
});

// Close the menu when you left click anywhere
document.addEventListener("click", function(event){
  modal.classList.add("hidden");
});

.hidden {display:none;}
.customMenu { font-weight:bold; color:#f00; }
#contextMenu {
  position:absolute; 
  border:2px double #333; 
  width:150px; 
  height:175px;
  top:20%;
  left:30%;
  background-color:#e0e0e0;
  box-shadow:5px 5px #909090;
}

<div class="customMenu">1</div>
<div id="one">2</div>
<div class="customMenu">3</div>
<div>4</div>
<div>5
  <span class="customMenu">6</span>
</div>
<div>6
  <h1>7
    <div class="customMenu">8</div>
  </h1>
</div>
<div class="customMenu">9</div>

<div id="contextMenu" class="hidden">
  <ul>
    <li>menu item</li>
    <li>menu item</li>
    <li>menu item</li>
    <li>menu item</li>
    <li>menu item</li>
    <li>menu item</li>
  </ul>
</div>

Asutosh · Accepted Answer · 2020-07-31 17:28:28Z

1

Hi you can detect from traget attribute of the event.

window.oncontextmenu = (e) => {
  if (e.target.id === "customdiv") {

    e.preventDefault();
   //Show custom context menu here
  }

}

https://jsfiddle.net/asutosh/o87qmbx6/7/

answered Jul 31, 2020 at 17:28

Asutosh

1,8382 gold badges16 silver badges22 bronze badges

4 Comments

goryef Over a year ago

But this will not restore default behavior

Asutosh Over a year ago

When you want to invoke/restore default action please check : stackoverflow.com/questions/7732854/…

goryef Over a year ago

That's looks like exactly what I am looking for. Thank You

Asutosh Over a year ago

@goryef Nice, that you have found the solution.

Collectives™ on Stack Overflow

Javascript toggle default and custom contextmenu on right-click

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related