title: onclick() and onblur() ordering issue
body: <p>I have an input field that brings up a custom drop-down menu.  I would like the following functionality:</p>
  
  <ul>
  <li>When the user clicks anywhere outside the input field, the menu should be removed.</li>
  <li>If, more specifically, the user clicks on a div inside the menu, the menu should be removed, <em>and</em> special processing should occur based on which div was clicked.</li>
  </ul>
  
  <p>Here is my implementation:</p>
  
  <p>The input field has an <code>onblur()</code> event which deletes the menu (by setting its parent's <code>innerHTML</code> to an empty string) whenever the user clicks outside the input field.  The divs inside the menu also have <code>onclick()</code> events which execute the special processing.</p>
  
  <p>The problem is that the <code>onclick()</code> events never fire when the menu is clicked, because the input field's <code>onblur()</code> fires first and deletes the menu, including the <code>onclick()</code>s!  </p>
  
  <p>I solved the problem by splitting the menu divs' <code>onclick()</code> into <code>onmousedown()</code> and <code>onmouseup()</code> events and setting a global flag on mouse down which is cleared on mouse up, similar to what was suggested in <a href="https://stackoverflow.com/a/15196689/1397061">this answer</a>.  Because <code>onmousedown()</code> fires before <code>onblur()</code>, the flag will be set in <code>onblur()</code> if one of the menu divs was clicked, but not if somewhere else on the screen was.  If the menu was clicked, I immediately return from <code>onblur()</code> without deleting the menu, then wait for the <code>onclick()</code> to fire, at which point I can safely delete the menu.</p>
  
  <p>Is there a more elegant solution?</p>
  
  <p>The code looks something like this:</p>
  
  <pre><code>&lt;div class="menu" onmousedown="setFlag()" onmouseup="doProcessing()"&gt;...&lt;/div&gt;
  &lt;input id="input" onblur="removeMenu()" ... /&gt;
  
  var mouseflag;
  
  function setFlag() {
      mouseflag = true;
  }
  
  function removeMenu() {
      if (!mouseflag) {
          document.getElementById('menu').innerHTML = '';
      }
  }
  
  function doProcessing(id, name) {
      mouseflag = false;
      ...
  }
  </code></pre>