点击空白区域隐藏指定元素实例代码:
此效果不是无的放矢的，当然正常的应用应该没有这么简单，一般都是和其他的功能结合在一起的，比如自定义select下拉菜单，点击空白区域的时候可以隐藏下拉菜单，本章节就是单独拿出这个功能做一下简单的介绍。
代码实例如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.softwhy.com/" />
<title>点击空白隐藏指定元素-蚂蚁部落</title>
<style type="text/css">
div
{
background:#9CF;
position:absolute;
overflow:auto;
display:none;
padding:53px;
cursor:pointer;
}
</style>
<script type="text/javascript">
function $(id){
return (document.getElementById(id));
}
function show_div(evt)
{
var od=$(‘thediv‘);
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)
{
$(‘thediv‘).style.display=‘none‘;
}
function control_bubble(oEvent)
{
//取消冒泡
oEvent=oEvent||window.event;
if(document.all)
{
oEvent.cancelBubble=true;
}
else
{
oEvent.stopPropagation();
}
};
function fill_input(oEvent)
{
$(‘thetext‘).value=$(‘thediv‘).innerHTML;
control_bubble(oEvent);
}
window.onload=function()
{
$("thetext").onfocus=show_div;
document.onclick=function()
{
hide_div();
};
$("thetext").onclick=control_bubble;
$("thediv").onclick=fill_input;
}
</script>
</head>
<body>
<input type="text" id="thetext" value="">
<div id="thediv">点击我</div>
</body>
</html>
以上代码实现了我们的要求，此功能类似于一个非常简略的自定义select下拉菜单，当点击弹出来div的时候能够将文本写入文本框，点击网页其他空白区域，可以隐藏弹出的div，下面简单介绍一下实现过程。
一.实现原理:
为文本框注册onfocus事件处理函数，当文本框获取焦点的时候，能够将div设置为可见状态，在此事件处理函数的后面做了防止事件冒泡的处理，否则点击文本框，div显示之后又瞬间被隐藏，因为在document上注册了onclick事件处理函数，此事件处理函数可以隐藏div。核心内容大体如此，具体可以参阅代码注释。
二.代码注释:
1.function $(id){return (document.getElementById(id));}，此函数类似于jquery的id选择器功能，能偶返回给定id属性值的对象。
2.function show_div(evt){}，作为文本框的onfocus事件处理函数，当点击文本框的时候能够显示div元素。
3.var od=$(‘thediv‘)，获取div对象。
4.var e=window.event||evt，获取事件对象，写法是为了兼容各个浏览器。
4.var o=oEvent.srcElement||oEvent.target，获取事件源对象，这种写法是为了浏览器兼容性问题。
5.with(od.style){display=‘block‘;left=o.offsetLeft+‘px‘;top=o.offsetTop+o.offsetHeight+1+‘px‘}，具体可以参阅相关阅读with语句。
6.display=‘block‘，将div对象显示。
7.left=o.offsetLeft+‘px‘，设置div的left属性值，值为文本框距离body的距离，也就是说弹出div的左边缘是与文本框的左边缘对齐的。
8.top=o.offsetTop+o.offsetHeight+1+‘px‘，用于设置div的top属性值，值为文本框上边缘与body的距离+文本框的高度+1px。
9.function hide_div(evt) {$(‘thediv‘).style.display=‘none‘; }，将div设置为隐藏，是document的onclick事件的处理函数。
10.function control_bubble(oEvent) {}，文本框的onclick事件处理函数，oEvent事件对象。
11.oEvent=oEvent||window.event，获取事件对象，兼容个浏览器。
12.if(document.all) ，判断是否是IE浏览器。
13.oEvent.cancelBubble=true，IE浏览器阻止事件冒泡的方式。
14.oEvent.stopPropagation(),标准浏览器使用的阻止事件冒泡的方式。
15.fill_input()，div的onclick事件处理函数。
16.$(‘thetext‘).value=$(‘thediv‘).innerHTML，将div中的内容赋值给文本框的value属性。
17.control_bubble(oEvent)，调用此函数阻止冒泡。
18.window.onload=function(){}，当文档内容完全加载完毕再去执行函数中的代码。
19.$("thetext").onfocus=show_div，为文本框对象注册事件处理函数。
20. document.onclick=function(){}，为document对象注册事件处理函数。
21.$("thetext").onclick=control_bubble，注册事件处理函数。
22.$("thediv").onclick=fill_input，注册事件处理函数。
三.相关阅读:
1.var e=window.event||evt可以参阅var ev=window.event||ev的作用是什么一章节。
2.e.srcElement可以参阅javascript的srcElement事件属性一章节。
3.e.target可以参阅javascript的target事件属性一章节。
4.with语句可以参阅javascript中with语句的使用一章节。
5.offsetLeft属性可以参阅offsetLeft、clientLeft和scrollLeft等属性的用法一章节。
6.cancelBubble可以参阅javascript的cancelBubble事件属性一章节。
7.stopPropagation可以参阅javascript的stopPropagation()方法一章节。
8.onfocus事件可以参阅javascript的onfocus事件一章节。
9.onclick事件可以参阅javascript的onclick事件一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8871
更多内容可以参阅:http://www.softwhy.com/javascript/