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>