我们在web前端开发的过程中，常常会遇到这样的效果，就是我们点击某个元素让层出现，而点击层以外的地方层隐藏，而小编在平时开发过程中也遇到过这样的问题，通过自己的实践得到一个比较好的方法，今天给大家说一说,为了让大家看的清楚，我直接以实例说明。
一.要用到的知识
1.事件冒泡
2.事件对象(e.target和e.srcElement)
二.实例
html代码:
| 代码如下 | 复制代码 |
|
<div id=”div1″></div> <input type=”button” value=”点击” id=”btn”/> |
|
js代码：
| 代码如下 | 复制代码 |
| window.onload=function() { var oDiv=document.getElementById(“div1″); var oBtn=document.getElementById(“btn”); document.onclick=function(ev) { var e=ev||event; var target=e.target||e.srcElement; if(e.target.id!=’div1′)//事件对象 { oDiv.style.display=”none”; } } oBtn.onclick=function(ev) { var e=ev||event; oDiv.style.display=”block”; if(e && e.stopPropagation){//阻止冒泡 e.stopPropagation(); }else{ window.event.cancelBubble = true; } } } |
|
例2
| 代码如下 | 复制代码 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=http://www.111cn.net> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>点击文字弹出层</title> <style type="text/css"> <!-- *{font-size:12px;font-family:Verdana, Geneva, sans-serif;line-height:14px} a{color:#039} a:hover{color:#f60} .pop{position:absolute;left:40%;top:40%;width:300px;height:100px;background:#eee;border:1px solid #ccc} .pop_head{position:relative;height:20px;background:#ccc} .pop_head a{position:absolute;right:8px;line-height:20px;color:#000;text-decoration:none} .pop_head a:hover{color:#f60;text-decoration:none} .pop_body{padding:8px} --> </style> </head> <body> <!--首先设置一个层:--> <div id="pop" class="pop" style="display:none"> <div class="pop_head"><a href="javascript:void(0);" onclick="hide()">关闭</a></div> <div class="pop_body">谢谢光临……</div> </div> <!--弹出层的按钮:--> <a href="javascript:void(0);" onclick="show();">弹出按钮</a> <script type="text/javascript"> var EX = { addEvent:function(k,v){ var me = this; if (me.addEventListener) me.addEventListener(k, v, false); else if(me.attachEvent) me.attachEvent("on" + k, v); else me["on" + k] = v; }, removeEvent:function(k,v){ var me = this; if (me.removeEventListener) me.removeEventListener(k, v, false); else if (me.detachEvent) me.detachEvent("on" + k, v); else me["on" + k] = null; }, stop:function(evt){ evt = evt || window.event; evt.stopPropagation?evt.stopPropagation():evt.cancelBubble=true; } }; document.getElementById('pop').onclick = EX.stop; var url = '#'; function show(){ var o = document.getElementById('pop'); o.style.display = ""; setTimeout(function(){EX.addEvent.call(document,'click',hide);}); } function hide(){ var o = document.getElementById('pop'); o.style.display = "none"; EX.removeEvent.call(document,'click',hide); } </script> </body> </html> |
|
时间： 2024-12-24 22:10:02