title: Div onblur event called when clicking checkbox inside div
body: <p>I have a popup div and want to hide it when users click outside of the div. Inside the div, I have a checkbox...</p>
  
  <p>Problem is, the div's onblur event gets fired when trying to click on the checkbox. I put cancelEventBubble code on the onclick of the checkbox but the onblur fires before the checkbox onclick event...</p>
  
  <p>any ideas or suggestions? This seems so simple to do but is not quite that simple...</p>
  
  <p>Regards,
  Albert</p>
  
  <pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;
  &lt;head&gt;
      &lt;title&gt;Untitled Page&lt;/title&gt;
  &lt;style type="text/css"&gt;
  .popup
  {
      display: none;
      position: relative;    
      border: solid 1px black;
      width: 100px;
      left: 100px;
      top: 100px;
  }
  
  .lookupButton
  {
      width: 15px;
      height: 20px;
      background-color: blue;
  }
  
  .lookup
  {
      border: solid 1px green;
  }
  &lt;/style&gt;
  &lt;script language="javascript" type="text/javascript"&gt;
  var popupVisible = false;
  
  function cancelEventBubble(e) {
       if (!e) var e = window.event;
       e.cancelBubble = true;
       if (e.stopPropagation) e.stopPropagation();
  }
  
  function showPopup(obj)
  {
      if (!popupVisible)
      {
          popupVisible = true;
          document.getElementById("popup").style.display = "block";
          document.getElementById("popup").focus();
      }
      else
      {
          popupVisible = false;
          document.getElementById("popup").style.display = "";
      }
  }
  
  function hidePopup()
  {
      popupVisible = false;
      document.getElementById("popup").style.display = "";
  }
  
  function setTextValue(obj)
  {
      var combo = document.getElementById("cbo1");
      if (combo.value.indexOf(obj.value) == -1)
      {
          combo.value += obj.value + "; ";
      }
      else
      {
          combo.value = combo.value.replace(obj.value + "; ", "");
      }
  }
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;table&gt;&lt;tr&gt;&lt;td&gt;
      &lt;input readonly="readonly" type="text" name="cbo1" id="cbo1" /&gt;
  &lt;/td&gt;&lt;td&gt;
      &lt;div class="lookupButton" onclick="showPopup(this);"&gt;&lt;/div&gt;
  &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  
  &lt;div id="popup" class="popup" onblur="hidePopup()"&gt;
      &lt;input id="chk0" type="checkbox" onclick="cancelEventBubble(event); setTextValue(this);" value="John" /&gt;John&lt;br /&gt;
      &lt;input id="chk1" type="checkbox" onclick="cancelEventBubble(event); setTextValue(this);" value="Jack" /&gt;Jack&lt;br /&gt;
      &lt;input id="chk2" type="checkbox" onclick="cancelEventBubble(event); setTextValue(this);" value="James" /&gt;James&lt;br /&gt;
      &lt;input id="chk3" type="checkbox" onclick="cancelEventBubble(event); setTextValue(this);" value="Richard" /&gt;Richard&lt;br /&gt;
      &lt;input id="chk4" type="checkbox" onclick="cancelEventBubble(event); setTextValue(this);" value="Tim" /&gt;Tim&lt;br /&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>