Div onblur event called when clicking checkbox inside div

Question

I have a popup div and want to hide it when users click outside of the div. Inside the div, I have a checkbox...

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...

any ideas or suggestions? This seems so simple to do but is not quite that simple...

Regards, Albert

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
<style type="text/css">
.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;
}
</style>
<script language="javascript" type="text/javascript">
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 + "; ", "");
    }
}

</script>
</head>
<body>
<table><tr><td>
    <input readonly="readonly" type="text" name="cbo1" id="cbo1" />
</td><td>
    <div class="lookupButton" onclick="showPopup(this);"></div>
</td></tr></table>

<div id="popup" class="popup" onblur="hidePopup()">
    <input id="chk0" type="checkbox" onclick="cancelEventBubble(event); setTextValue(this);" value="John" />John<br />
    <input id="chk1" type="checkbox" onclick="cancelEventBubble(event); setTextValue(this);" value="Jack" />Jack<br />
    <input id="chk2" type="checkbox" onclick="cancelEventBubble(event); setTextValue(this);" value="James" />James<br />
    <input id="chk3" type="checkbox" onclick="cancelEventBubble(event); setTextValue(this);" value="Richard" />Richard<br />
    <input id="chk4" type="checkbox" onclick="cancelEventBubble(event); setTextValue(this);" value="Tim" />Tim<br />
</div>
</body>
</html>

Isn't that simple. There's one way to do it, using JQuery framework, if you care. — yoda

Christian C. Salvadó Christian C. Salvadó · Accepted Answer · 2009-10-02T04:27:27

On modern browsers the onblur event doesn't fires with div elements, a crossbrowser approach that can also deal with the issues of IE could be to use event delegation, binding a click event handler to the document, and hide the popup when the clicked element is not a checkbox or the lookupButton, for example:

document.onclick = function (e) { 
  e = e || window.event; 
  var element = e.target || e.srcElement; 

  if (element.tagName != "INPUT" && element.type != "checkbox" &&
      element.className != "lookupButton") { 
    hidePopup(); 
  } 
};

Check the above example with the rest of your code here.

Div onblur event called when clicking checkbox inside div

2 Answers