JavaScript preventDefault is delayed/not working when app is deployed on a network Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of JavaScript preventDefault is delayed/not working when app is deployed on a network without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I have an application with custom context menus that are displayed on right-click. When that happens, I don’t want default windows menu to appear. I use the following code to accomplish that:

            // right click
if (e.which == 3) {
    let menuVisible = false;
    const toggleMenu = command => {
        menu.style.display = command === "show" ? "block" : "none";
        menuVisible = !menuVisible;
    };
    const setPosition = ({ top, left }) => {
        menu.style.left = `${left}px`;
        menu.style.top = `${top}px`;
        toggleMenu("show");
    };
    const origin = {
        left: e.pageX,
        top: e.pageY
    };
    setPosition(origin);
    // toggle right clicked menu visibility
    window.addEventListener("click", e => {
        if (menuVisible) toggleMenu("hide");
    });
    // Set up an event handler for the document right click
    document.addEventListener("contextmenu", function (event) {
        // Only do something when the element that was actually right-clicked
        if (event.target.classList.contains("menu")) {
            event.preventDefault();
        }
    });
}

When app is running on localhost everything works as expected. However, when application is deployed on a network server and then accessed from any clients on the network the default menu appears first and then custom menu displayed behind it. There are no any errors. Any advise on how to fix that will be greatly appreciated.

Update: It seems that if right mouse button is hold not just clicked the behavior is as expected.

Answer

I think you’ll have to do something like this:

let menuVisible = false;

const toggleMenu = command => {
  menu.style.display = command === "show" ? "block" : "none";
  menuVisible = !menuVisible;
};

const setPosition = ({ top, left }) => {
  menu.style.left = `${left}px`;
  menu.style.top = `${top}px`;
};

// Set up an event handler for the document right click
document.addEventListener("contextmenu", function (e) {
  if (e.target.classList.contains("menu")) {
    e.preventDefault();
    setPosition({
      left: e.pageX,
      top: e.pageY
    });
    toggleMenu("show");
  }
});

// Hide menu
document.addEventListener("click", function(e) {
  if (e.target.classList.contains("menu-item")) {
    alert("menu item was clicked");
  }
  toggleMenu("hide"); 
});
#menu {
  position: absolute;
  padding: 10px;
  background: #eee;
  list-style-type: none;
}
<ul id="menu" style="display:none;">
  <li class="menu-item">Item 1</li>
  <li class="menu-item">Item 2</li>
  <li class="menu-item">Item 3</li>
</ul>

<button class="menu">toggle menu on right click</button>
We are here to answer your question about JavaScript preventDefault is delayed/not working when app is deployed on a network - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji