0

我尝试使用下面的代码设置仅在单击容器 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";
    }
}​
4

3 回答 3

1

几个问题：

  • 看起来你正在用一个不必要的函数包装你的点击处理程序。

    尝试使用以下方法定义您的 onclick 处理程序：

    container.onclick = contextmenu;

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

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

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

  • 您对容器样式的初始分配不会将值设置为 string。它应该是：

    contextmenu.style.display = 'none';

进行这些更改后，您会注意到您的容器不可点击。那是因为它没有可见的内容，也没有 width 或 height。您可能想要设置这些，或者使用 CSSvisibility而不是display隐藏/显示元素。

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

于 2012-04-30T19:48:02.990 回答
1

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

  • 您有 2 个名为“contextmenu”的不同变量。第一个是你做 agetElementById的时候，第二个是你定义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";
    }

}
于 2012-04-30T19:52:02.880 回答
1

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

contextmenu.style.display = "none";

你不应该name为 aVariable和 a定义一个Function：

var contextmenu // and function 
contextmenu()  // throw syntax error;

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

于 2012-04-30T19:55:27.960 回答