1

我正在尝试实现一个上下文菜单，该菜单出现在右键单击以 divcontextFolder具有z-index: 1000.

为此，我使用 JQuery 将 contextmenu 事件绑定到 div。这工作正常。我希望这个上下文菜单在

  • 用户左键单击屏幕上的任意位置，
  • 用户右键单击屏幕上的任何位置，除了任何其他div.contextfFolder

如果在打开 contextmenu 并右键单击其他div.contextFolder时，我希望我当前的 contextmenu 消失并在 new 上打开一个新的div.contextFolder。

当我显示到上下文菜单时，要做到这一点，

  • 我还使用height: 100%、width: 100%和z-index: 100.
  • 我将左键单击事件绑定到此叠加层，以便在单击它时，
    • 覆盖被移除，
    • 上下文菜单被隐藏。
  • 我还将上下文菜单绑定到overlay以隐藏上下文菜单并overlay在右键单击除另一个点之外的任何点时删除div.contextFolder
  • 为了防止 contextmenu 上覆盖的左键单击事件，我还分配z-index: 101给 contextmenu。（叠加层的 z-index 为 100）

这对我来说似乎一切都很好。（我是 CSS 的新手，所以我可能会遗漏一些非常明显的东西）。

一切正常，除非当我右键单击div.contextFolder上下文菜单已经在另一个上打开时div.contextFolder，它会转到覆盖的上下文菜单事件（隐藏到当前事件）。我要开新的。

我已经在 Chrome 和 Firefox 最新版本中对此进行了测试。

这就是小提琴。

谢谢你。

4

2 回答 2

1

我刚刚为你创建了一个小提琴。我所做的只是修改你的javascript。

JSFiddle

希望对您有所帮助。

PS：我还添加了其他代码，用于检查初始打开菜单后的点击是否是对子菜单的点击

干杯

于 2012-07-15T13:38:48.683 回答
1 
 bind('contextmenu' , function(e){
             $(".folderContextMenu").css( {position:"absolute", top:e.pageY, left: e.pageX, zIndex: '101'} );
                e.preventDefault();
                //alert('not working');
                return false;
            }

问题是您没有再次移动上下文菜单。它停留在旧位置。因此我稍微改变了绑定功能。但是，如果您正在使用叠加层，并对其应用绑定功能，则菜单会随处显示，这是第二个问题。

这是完整的、更改的JSFiddle

编辑：我使用了窗口 onclick 方法，看这里，这里是菜单反弹的证据。

于 2012-07-15T13:13:45.397 回答