Question

我正在尝试制作自定义上下文菜单。我最终会提出所有选择。我在Firefox和Chrome中都尝试过它，它甚至都没有出现。它只显示默认的上下文菜单这是我的代码：

sandbox.html：

<!DOCTYPE html>
<!-- Christian's Sandbox -->
<html>
   <head>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="Author" content="Christian Arnold" />
    <title>Sandbox</title>
    <link rel="stylesheet" type="text/css" href="sandbox.css" />
    <script type="text/javascript" src="sandbox.js"></script>
  </head>
  <body>
    <div id="contextmenu">
      This is the context menu div.<br />
      Put all your context menu-y things in here.
    </div>
  </body>
</html>

sandbox.css：

/* CSS for Christian's Sandbox */

#contextmenu {
  display: none;
  position: absolute;
  left: 0px;
  top: 0px;
  border: 1px solid #aaa;
  border-radius: 2px;
  background-color: #ccc;
  color: #000;
}

sandbox.js：

/* JavaScript for Christian's Sandbox */
document.onload = function() { // Make sure this all works

// Context menu script
var contextmenudiv = document.getElementById("contextmenu"),
    contextmenu = {
      hide: function(event) {
        // Hide the context menu div
        contextmenudiv.style.display = "none";
        // Remove the event listener
        document.removeEventListener("click", contextmenu.hide, true);
      },
    };
document.addEventListener("contextmenu", function(event) {
  // Prevent the browser from opening the default context menu
  event.preventDefault();
  // Move the context menu to where the mouse is with respect to the page
  contextmenudiv.style.left = (event.pageX + scrollX) + "px";
  contextmenudiv.style.top = (event.pageY + scrollY) + "px";
  // Display it
  contextmenudiv.style.display = "block    ";
  // When you click somewhere else, hide it
  document.addEventListener("click", contextmenu.hide, true);
}, true);

}

Answer 1

我修好了。

我做的是：
我将contextmenudiv = document.getElementById("contextmenu")放入事件监听器，而不是将整个事件放入document.onload。

这是我的新代码：

/* JavaScript for Christian's Sandbox */

// Context menu script
var contextmenudiv,
    contextmenu = {
      hide: function(event) {
        if (event.button == 0) {
          event.preventDefault();
          // Hide the context menu div
          contextmenudiv.style.display = "none";
          // Remove the event listener
          document.removeEventListener("click", contextmenu.hide, true);
        }
      },
    };
document.addEventListener("contextmenu", function(event) {
  contextmenudiv = document.getElementById("contextmenu");
  // Prevent the browser from opening the default context menu
  event.preventDefault();
  // Move the context menu to where the mouse is with respect to the page
  contextmenudiv.style.left = (event.pageX + scrollX) + "px";
  contextmenudiv.style.top = (event.pageY + scrollY) + "px";
  // Display it
  contextmenudiv.style.display = "block";
  // When you click somewhere else, hide it
  document.addEventListener("click", contextmenu.hide, true);
}, true);

现在，我有效果和通知系统一起使用。

自定义HTML / Javascript上下文菜单不起作用

1 个答案: