z-index 在右键单击时不起作用

Question

我正在尝试实现一个上下文菜单，该菜单在右键单击 div 时显示为具有 contextFolder 的类 z-index: 1000。

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

时消失

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

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

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

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

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

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

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

这是fiddle。

谢谢。

Answer 1

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

JSFiddle

希望对你有所帮助。

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

干杯

Answer 2

 bind('contextmenu' , function(e){
             $(".folderContextMenu").css( {position:"absolute", top:e.pageY, left: e.pageX, zIndex: '101'} );
                e.preventDefault();
                //alert('not working');
                return false;
            }

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

这是完整的，更改后的JSFiddle

编辑：我用过window onclick方法，看here和here就是菜单反弹的证据。