Question

I am trying to implement a contextmenu that appears on right click to div with class contextFolder which has z-index: 1000.

To do that, I bind contextmenu event to divs with JQuery. This is working fine. I want this contextmenu to disappear when

• User left clicks anywhere on the screen,
• User right clicks anywhere on the screen except any other div.contextfFolder

If while contextmenu is opened and right click happens on other div.contextFolder, I want my current contextmenu to disappear and open a new one on new div.contextFolder.

To do that when I show to contextmenu,

• I also create a overlay with height: 100%, width: 100%, and z-index: 100.
• I bind left click event to this overlay such that when it is clicked,
  • overlay is removed,
  • contextmenu is hidden.
• I also bind contextmenu to overlay to hide contextmenu and remove overlay when right clicked to any point except another div.contextFolder
• To prevent left click event of overlay on contextmenu, I also assign z-index: 101 to contextmenu. (z-index of overlay is 100)

This seems all fine to me.(I am newbie in CSS, so I might be missing something very obvious).

All working fine, except when I right click on div.contextFolder when a contextmenu is already open on another div.contextFolder, it goes to contextmenu event of overlay (which hides to current one). I want new one to open.

I have tested this in Chrome and Firefox latest versions.

This is the fiddle.

Thank you.

Answer 1

I’ve just created a fiddle for you.
All I did was rework your javascript.

JSFiddle

Hope that helps you.

PS: I also added other code which checks to see whether clicks after the initial opening of a menu are clicks on a child of the menu

Cheers