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" ".dtd">
<html xmlns="" >
<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 bo = document.getElementById("cbo1");
if (bo.value.indexOf(obj.value) == -1)
{
bo.value += obj.value + "; ";
}
else
{
bo.value = bo.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>
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/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/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 bo = document.getElementById("cbo1");
if (bo.value.indexOf(obj.value) == -1)
{
bo.value += obj.value + "; ";
}
else
{
bo.value = bo.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 Commented Oct 2, 2009 at 3:46
2 Answers
Reset to default 3On 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.
Try going about it the other way. Use a three-layered approach where the bottom layer is the normal page, the top layer is your popup div, and the middle layer is a transparent, full-screen catch-all div that has an onfocus event that closes your popup (rather than using onblur).
If you provide some code, it'll be easier to help with your approach.