标签：
点击空白区域隐藏指定元素实例代码:
此效果不是无的放矢的，当然正常的应用应该没有这么简单，一般都是和其他的功能结合在一起的，比如自定义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/
标签：
原文地址：http://www.cnblogs.com/come-on/p/5094740.html
