Question

我正在尝试实现一个右键单击显示的上下文菜单，其中包含contextFolder的{{1}}类。

为此，我使用JQuery将contextmenu事件绑定到div。这工作正常。

时我希望这个上下文菜单消失

用户左键单击屏幕上的任意位置
用户右键单击屏幕上的任何位置，但任何其他z-index: 1000

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

当我向contextmenu显示时，

我还创建了一个包含div.contextFolder，height: 100%和width: 100%的叠加层。
我将左键单击事件绑定到此叠加层，以便在单击时，
- 叠加已删除，
- contextmenu被隐藏。
我还将上下文菜单绑定到z-index: 100以隐藏上下文菜单，并在右键单击除{al} overlay以外的任何点时删除overlay
为防止在上下文菜单上叠加左键单击事件，我还将div.contextFolder指定给contextmenu。（叠加的z指数是100）

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

所有工作正常，除非我在另一个z-index: 101上已经打开了一个上下文菜单时右键单击div.contextFolder，它将转到覆盖的上下文菜单事件（隐藏到当前的事件）。我想要新的一个打开。

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

这是fiddle。

谢谢。

Answer 1

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

问题是您没有再次移动上下文菜单。它保持在原来的位置。因此我有点改变了bind-function。但是如果您正在使用叠加层，并对其应用绑定功能，则菜单会显示在任何地方，这是第二个问题。

以下是完整的，已更改的JSFiddle

编辑：我使用了窗口onclick方法，看here，here就是菜单反弹的证明。

Answer 2

我刚刚为你创造了一个小提琴。我所做的就是重写你的javascript。

JSFiddle

希望对你有所帮助。

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

干杯

z-index无法右键单击

2 个答案: