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, Jul 31 '20 at 17:15
In which situation should the *normal* context menu show, or your custom menu ? — nip, Jul 31 '20 at 17:16
Please create a fiddle or sandbox if you can show this problem at runtime. — Asutosh, Jul 31 '20 at 17:19
@ScottMarcus. Yes. I would like to have custom displayed only when certain elements are right-clicked. — goryef, Jul 31 '20 at 17:20
Why not just apply the event listener to just those elements, rather than `window`? — Scott Marcus, Jul 31 '20 at 18:08
@ScottMarcus. I tried to implement. Both context menus are displayed unless I add an alert box right before the code. — goryef, Jul 31 '20 at 19:19
You need to make sure you are not adding a `contextmenu` listener on `window`. Just put it on the specific elements you care about. — Scott Marcus, Jul 31 '20 at 19:30
@ScottMarcus I did. I have updated my post. However, it's only works as expected if there is an alert box in front of it. Seems like a timing issue. — goryef, Jul 31 '20 at 19:39
Please see my answer. I believe that your problem is in the way you are trying to create a reusable function that you can call to hook up the event listener instead of just doing it more directly (and simply). — Scott Marcus, Jul 31 '20 at 20:17

score 1 · Answer 1 · answered Jul 31 '20 at 17:28

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 '20 at 17:28

Asutosh

1,775
2
15
22

But this will not restore default behavior – goryef Jul 31 '20 at 17:43
1

When you want to invoke/restore default action please check : https://stackoverflow.com/questions/7732854/is-there-a-universal-way-to-invoke-a-default-action-after-calling-event-preven – Asutosh Jul 31 '20 at 17:57
That's looks like exactly what I am looking for. Thank You – goryef Jul 31 '20 at 17:58
@goryef Nice, that you have found the solution. – Asutosh Aug 01 '20 at 03:02

Scott Marcus · Accepted Answer · 2020-08-01T13:57:06.270

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>

Javascript toggle default and custom contextmenu on right-click

2 Answers2