js中点击空白区域时文本框与隐藏层的显示与影藏问题

当文本框获得焦点的时候，在文本框的下方显示一个浮动层。

当用户点击除了文本框和浮动层以外的网页空白处时，要隐藏浮动层。

当用户点击浮动层时，改变文本框的值。
复制代码代码如下:
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script language="JavaScript">
function $（id）{
return （document.getElementById（id））;
}

function show_div（evt） {
var od = $（"div1"）;
var e = window.event || evt;
var o = e.srcElement || e.target;
with （od.style） {
display = "block";
left = o.offsetLeft + "px";
top = o.offsetTop + o.offsetHeight + 1 + "px";
}
}

function hide_div（evt） {
$（"div1"）.style.display = "none";
}

function control_bubble（oEvent） {
//取消冒泡
oEvent = oEvent || window.event;
if （document.all） {
oEvent.cancelBubble = true;
} else {
oEvent.stopPropagation（）;
}
};

function fill_input（oEvent） {
$（"text1"）.value = $（"div1"）.innerHTML;
control_bubble（oEvent）;
}

window.onload = function（） {
$（"text1"）.onfocus = show_div;

document.onclick = function（） {
//隐藏层
hide_div（）;
};

$（"text1"）.onclick = control_bubble;
$（"div1"）.onclick = fill_input;
}
</script>
<body>
<br>
<input type="text" id="text1" value="">
<br>
<div id="div1" align="center"
style="background:#666;position:absolute;overflow:auto;display:none;padding:50px;">点击我</div>
</body>
</html>