87,910
社区成员
发帖
与我相关
我的任务
分享关于onclick事件的问题
我想实现一个类似下拉框select的功能,就是单击按钮显示,再单击就隐藏,如下代码,但是当okdisplay==true时,怎么实现无论点击网页任何地方,dobj就隐藏起来呢?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
<!--
div{
border:1px solid #BCCBFE;
}
#newselect{
margin:10px auto;
width:100px;
height:20px;
font:14px/20px "宋体";
text-align:center;
cursor:pointer;
position:relative;
}
#dropdiv{
width:100px;
height:150px;
position:absolute;
top:20px;
left:-1px;
}
-->
</style>
<script type="text/javascript">
<!--
var okdisplay = false;
window.onload=function(){
var sobj=document.getElementById("newselect");
var dobj=document.getElementById("dropdiv");
sobj.onclick=function(){
if (okdisplay == false){
okdisplay = true;
dobj.style.display="block";
}
else if (okdisplay == true){
okdisplay = false;
dobj.style.display="none";
}
}
}
//-->
</script>
</head>
<body>
<div id="newselect">test
<div id="dropdiv" style="display:none;">something</div>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
wtcsy 2008-10-29
- 打赏
- 举报
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
<!--
div{
border:1px solid #BCCBFE;
}
#newselect{
margin:10px auto;
width:100px;
height:20px;
font:14px/20px "宋体";
text-align:center;
cursor:pointer;
position:relative;
}
#dropdiv{
width:100px;
height:150px;
position:absolute;
top:20px;
left:-1px;
}
-->
</style>
<script type="text/javascript">
<!--
document.onclick =function(){
if(okdisplay==false) return;
document.getElementById("dropdiv").style.display="none"
okdisplay = false
}
var okdisplay = false;
window.onload=function(){
var sobj=document.getElementById("newselect");
var dobj=document.getElementById("dropdiv");
sobj.onclick=function(e){
e =e || event
e.cancelBubble=true
if (okdisplay == false){
okdisplay = true;
dobj.style.display="block";
}
else if (okdisplay == true){
okdisplay = false;
dobj.style.display="none";
}
}
}
//-->
</script>
</head>
<body>
<div id="newselect">test
<div id="dropdiv" style="display:none;">something</div>
</div>
</body>
</html>要加一个阻止事件冒泡的事件才行
e =e || event
e.cancelBubble=true
wangruibaobei 2008-10-29
- 打赏
- 举报
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
<!--
div{
border:1px solid #BCCBFE;
}
#newselect{
margin:10px auto;
width:100px;
height:20px;
font:14px/20px "宋体";
text-align:center;
cursor:pointer;
position:relative;
}
#dropdiv{
width:100px;
height:150px;
position:absolute;
top:20px;
left:-1px;
}
-->
</style>
<script type="text/javascript">
<!--
var okdisplay = false;
window.onload=function(){
var sobj=document.getElementById("newselect");
var dobj=document.getElementById("dropdiv");
sobj.onclick=function(){
if (okdisplay == false){
okdisplay = true;
dobj.style.display="block";
}
else if (okdisplay == true){
okdisplay = false;
dobj.style.display="none";
}
}
sobj.onblur=function(){
if (okdisplay == true){
okdisplay = false;
dobj.style.display="none";
}
}
}
//-->
</script>
</head>
<body>
<div id="newselect">test
<div id="dropdiv" style="display:none;">something</div>
</div>
</body>
</html>
MOTA 2008-10-29
- 打赏
- 举报
document.body.onclick=function(){alert("我出现在所有地方哦");}
