title: Onblur event fires before another div's onclick
body: <p><img src="https://i.stack.imgur.com/vuFCO.png" alt="enter image description here"></p>
  
  <p>As above, I have  a button that, when clicked, will open the sub-menu. For each option in the sub-menu there are three elements (there's actually more I think, but will keep it as 3 for simplicity). I give focus to the main div (white 'frame') of the sub-menu. Onblur of this div - I then hide the sub-menu.</p>
  
  <p>This all behaves as expected - but I have the probem that when one of the 3 elements for a particular option are clicked (i.e. given focus), the main div will close due to it's onblur event handler - and the PopUp function that's linked to the onClick event of the elements for the options in the sub-menu are not fired/reached.</p>
  
  <p>I need someway of only handling the onblur event of the main div in this way if the options haven't been clicked.</p>
  
  <p>I have JQuery to use obviously so I'm more than happy to work with that to solve the problem.</p>