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

Question

我尝试使用下面的代码来设置一个上下文菜单，该菜单仅在单击容器 div 时显示。但我很困惑。如果这里有帮助的话，那就是 fiddle 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";
    }
}​

Answer 1

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

• 您有 2 个名为“contextmenu”的不同变量。第一个是当您执行 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";
    }

}