本文介绍了单击div内的复选框时调用div onblur事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个弹出的div，想在用户点击div外时隐藏它。在div里面，我有一个复选框...
问题是，当点击复选框时，div的onblur事件被触发。我在复选框的onclick上放置了cancelEventBubble代码，但onblur在复选框onclick事件之前触发...
任何想法或建议？这看起来很简单，但并不那么简单......
问候，
Albert
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1 -transitional.dtd>
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< title>无标题页< /标题>
< style type =text / css>
.popup
{
display：none;
职位：亲属;
border：固体1px黑色;
width：100px;
left：100px;
top：100px;
}
.lookupButton
{
width：15px;
height：20px;
background-color：blue;
}
.lookup
{
border：solid 1px green;
}
< / style>
< script language =javascripttype =text / javascript>
var popupVisible = false;
函数cancelEventBubble（e）{
if（！e）var e = window.event;
e.cancelBubble = true;
if（e.stopPropagation）e.stopPropagation（）;
}
函数showPopup（obj）
{
if（！popupVisible）
{
popupVisible = true;
document.getElementById（popup）。style.display =block;
document.getElementById（popup）。focus（）;
}
else
{
popupVisible = false;
document.getElementById（popup）。style.display =;
}
}
函数hidePopup（）
{
popupVisible = false;
document.getElementById（popup）。style.display =;
函数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 =readonlytype =textname =cbo1id =cbo1/>
< / td>< td>
< div class =lookupButtononclick =showPopup（this）;>< / div>
< / td>< / tr>< / table>
< div id =popupclass =popuponblur =hidePopup（）>
< input id =chk0type =checkboxonclick =cancelEventBubble（event）; setTextValue（this）; value =John/> John< br />
< input id =chk1type =checkboxonclick =cancelEventBubble（event）; setTextValue（this）; value =杰克/>杰克< br />
< input id =chk2type =checkboxonclick =cancelEventBubble（event）; setTextValue（this）; value =James/> James< br />
< input id =chk3type =checkboxonclick =cancelEventBubble（event）; setTextValue（this）; value =Richard/> Richard< br />
< input id =chk4type =checkboxonclick =cancelEventBubble（event）; setTextValue（this）; value =Tim/> Tim< br />
< / div>
< / body>
< / html>
解决方案
在现代浏览器上，事件不会触发 div 元素，一个可以处理IE问题的交叉浏览器方法可以使用，将单击事件处理程序绑定到文档，并在单击的元素不是复选框或 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（）;
}
};
检查上面的例子，其余代码。
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>
解决方案
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内的复选框时调用div onblur事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！