在HTML中用JavaScript实现一个层的隐藏和显示（button控件）小问题？

我的代码是这样的：<!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=gb2312" />
<title>无标题文档</title>
</head>
<script>
function ok1()
{
  var a=document.getElementById("div1");
  if(a.style.display=="none")
    a.style.display="block";
  else
    a.style.display="none";
}
</script><body>

<a href="#" onmouseout="ok1();" onmouseover="ok1();">显示层</a>
<input type="button" value="显示/隐藏"   onclick="ok1();" >
<br>
<div id="div1" style="display:none;background-color:yellow;width:100px;height:100px;border-style:solid;border-color:red;border-width:1px"><Br>点一下隐藏</div>
</body>
</html>
我想大家看了代码就知道效果了，就是简单的层的隐藏和显示，但我有一个问题
我这个效果是点击button按钮下面的层显示出来，再点击下按钮层就隐藏。这不是我要的效果
我想在我点击button按钮的时候层显示出来。我鼠标点击页面别的空白处层就隐藏。请教事件或是方法。先谢谢了

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!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=gb2312" />
<title>无标题文档</title>
</head>
<script>
function ok1()
{
  var a=document.getElementById("div1");
  if(a.style.display=="none")
  a.style.display="block";
  else
  a.style.display="none";
}
function ok2()
{
  var a=document.getElementById("div1");
  if(a.style.display=="none")
  a.style.display="block";

}
this.onclick= function(res){

if(window.event.srcElement.tagName != "INPUT")
{
var a=document.getElementById("div1");
       if(a.style.display!="none")
       a.style.display="none";

}
}
</script><body>

<a href="#" onmouseout="ok1();" onmouseover="ok1();">显示层</a>
<input type="button" value="显示/隐藏" onclick="ok2();" >
<br>
<div id="div1" style="display:none;background-color:yellow;width:100px;height:100px;border-style:solid;border-color:red;border-width:1px"><Br>点一下隐藏</div>
</body>
</html>
给document绑定一个click事件判断当点击的地方不是button的时候就隐藏
<!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" />
<title>无标题文档</title>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</head>
<script>
function ok1()
{
  document.getElementById("div1").style.display = "block";
}
</script><body onload="init()">

<a href="#" onmouseout="ok1();" onmouseover="ok1();">显示层</a>
<input id="btnId" type="button" value="显示/隐藏" onclick="ok1();" >
<br>
<div id="div1" style="display:none;background-color:yellow;width:100px;height:100px;border-style:solid;border-color:red;border-width:1px"><Br>点一下隐藏</div>
</body>
</html>
我下面的代码只能在ie下有效,由于在ff下div无法focus,所以在ff下,下面代码无效.等待能够兼容ff的代码!!!!
<!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=gb2312" />
<title>无标题文档</title>
</head>
<script>
function ok1()
{
  var a=document.getElementById("div1");
  if(a.style.display=="none") {
  a.style.display="block";a.focus()}
  else
  a.style.display="none";
}
window.onload= function(){
document.getElementById("div1").onblur=function(){
this.style.display = 'none';
};
}
</script><body>

<a href="#" onmouseout="ok1();" onmouseover="ok1();">显示层</a>
<input type="button" value="显示/隐藏" onclick="ok1();" >
<br>
<div id="div1" style="display:none;background-color:yellow;width:100px;height:100px;border-style:solid;border-color:red;border-width:1px"><Br>点一下隐藏</div>
</body>
</html>