最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
js点击弹出层以外的地方关闭层
时间:2013-11-16 编辑:简简单单 来源:一聚教程网
我们在web前端开发的过程中,常常会遇到这样的效果,就是我们点击某个元素让层出现,而点击层以外的地方层隐藏,而小编在平时开发过程中也遇到过这样的问题,通过自己的实践得到一个比较好的方法,今天给大家说一说,为了让大家看的清楚,我直接以实例说明。
一.要用到的知识
1.事件冒泡
2.事件对象(e.target和e.srcElement)
二.实例
html代码:
代码如下 | 复制代码 |
|
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
代码如下 | 复制代码 |
弹出按钮 |
相关文章
- js带缓冲与关闭弹出层 11-23
- 带关闭按钮js弹出层代码 11-04
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31