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

 代码如下 复制代码





点击文字<a href="/tags.php/%B5%AF%B3%F6%B2%E3/" target="_blank">弹出层</a>






弹出按钮


上一个：Javascript中call和apply详解 下一个：js中offsetLeft,offsetTop,offsetParent详解

相关文章

精彩推荐