我有一个弹出式div,想要在用户点击div之外时隐藏它。在div里面,我有一个复选框......
问题是,尝试单击复选框时会触发div的onblur事件。我将cancelEventBubble代码放在复选框的onclick上,但onblur在复选框onclick事件之前触发...
任何想法或建议?这看起来很简单但不是那么简单......
此致 阿尔伯特
<!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>
答案 0 :(得分:3)
在现代浏览器中,onblur事件不会触发div
元素,也可以处理IE问题的交叉浏览器方法可以使用event delegation,绑定点击文档的事件处理程序,并在单击的元素不是复选框或lookupButton
时隐藏弹出窗口,例如:
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();
}
};
使用代码的其余部分here检查上述示例。
答案 1 :(得分:0)
尝试另一种方式。使用三层方法,其中底层是普通页面,顶层是弹出div,中间层是一个透明的全屏catch-all div,其onfocus
事件会关闭你的弹出窗口(而不是使用onblur
)。
如果您提供一些代码,那么帮助您的方法会更容易。