如何创建一个上下文菜单，该菜单仅在单击容器时显示在光标位置上

How can I create a contextmenu which only displays on the cursor position when the container is clicked?

本文关键字：菜单 单击 显示 位置 光标 创建 何创建 上下文 一个      更新时间：2023-09-26

我尝试使用以下代码来设置一个上下文菜单，该菜单仅在单击容器div时显示。但是我很乱。如果它有帮助，那就是小提琴 http://jsfiddle.net/PhilippB/SMKMW/1/。

var container = document.getElementById("container");
var contextmenu = document.getElementById("contextmenu");
container.onclick = function() {contextmenu()} ;
contextmenu.style.display = "none";
function contextmenu(event) {
    if (contextmenu.style.display == "none") {
        contextmenu.style.display = "block";
        contextmenu.style.left = event.pageX + "px";
        contextmenu.style.top = event.pageY + "px";
    }
    else {
        contextmenu.style.display = "none";
    }
}​

你有一些奇怪的事情发生，所以我并不完全清楚你在追求什么。

  • 您有 2 个名为"上下文菜单"的不同变量。 第一个是当你做一个getElementById时，第二个是当你定义contextmenu函数时。
  • 您的 JS Fiddle 示例与上面的示例不匹配，并且在 IF 语句中包含错误(您只使用 1 =而不是 2(。 事实上，你的JSFiddle示例与上面的例子非常不同。
  • 在您的示例中，container 中唯一的内容是 contextmenu ，但您从 display: none 开始，因此很难知道单击什么才能显示它。

试试这个更新版本的 JSFiddle (http://jsfiddle.net/SMKMW/2/(

var container = document.getElementById("container");
var contextmenuElement = document.getElementById("contextmenu");
container.onclick = function() {contextmenu()} ;
contextmenuElement.style.display = 'none';
function contextmenu(event) {
    var container = document.getElementById("container");
    if (contextmenuElement.style.display == "block") {
        contextmenuElement.style.display = "none";
    }
    else {
        contextmenuElement.style.display = "block";
    }
}

您应该使用引号包装字符串值：

contextmenu.style.display = "none";

您不应该为Variable和Function定义一个name：

var contextmenu // and function 
contextmenu()  // throw syntax error;
除此之外，当一个元素

被隐藏时，你不能点击它，最好创建另一个元素来调用函数并显示一个隐藏的元素。

几个问题：

  • 看起来您正在使用不必要的函数包装单击处理程序。

    尝试使用以下方法定义点击处理程序：

    container.onclick = contextmenu;

  • 您还将处理程序函数和对 DOM 元素的引用命名为相同：contextmenu 。重命名其中一个。

  • 您对显示的比较不正确(而是作业(。它应该是：

    if (contextmenuElement.style.display == "block") {

  • 容器样式的初始分配不会将值设置为字符串。它应该是：

    contextmenu.style.display = 'none';

进行这些更改后，您会注意到容器不可单击。那是因为它没有可见的内容，也没有宽度或高度。您可能希望设置这些元素，或者使用 CSS visibility而不是 display 来隐藏/显示元素。

这是一个更新的小提琴(我已经向容器添加了显式的高度/宽度属性和背景颜色以查看发生了什么(。

相关文章：