你的位置:首页 > Java教程

[Java教程]点击空白区域隐藏指定元素实例代码

点击空白区域隐藏指定元素实例代码:
此效果不是无的放矢的,当然正常的应用应该没有这么简单,一般都是和其他的功能结合在一起的,比如自定义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/