JavaScript preventDefault 是 delayed/not 在网络上部署应用程序时工作

Question

我有一个应用程序，它带有右键单击时显示的自定义上下文菜单。发生这种情况时，我不希望出现默认 windows 菜单。我使用以下代码来实现：

            // 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();
        }
    });
}

当应用程序在本地主机上运行时，一切正常。然而，当应用程序部署在网络服务器上，然后从网络上的任何客户端访问时，默认菜单首先出现，然后自定义菜单显示在它后面。没有任何错误。任何关于如何修复的建议将不胜感激。

更新：似乎如果按住鼠标右键而不只是单击，则行为符合预期。

Answer 1

我想你必须这样做：

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>

JavaScript preventDefault 是 delayed/not 在网络上部署应用程序时工作

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

javascript

contextmenu

preventdefault