前端开发

 首页 > 前端开发 > javascript > js点击弹出层以外的地方关闭层

js点击弹出层以外的地方关闭层

分享到:
【字体:
导读:
          今天工作需要我们需要做一个弹出层,然后我们不单可以点击关闭按钮可以关闭层,同样点击弹出层以外任何地方都可以关闭弹出层。...

我们在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

 
 
 
 
点击文字弹出层 
 
 
 
 
 
 
 
关闭
  谢谢光临……
 
    弹出按钮    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); }     


分享到:
js原型prototype、proto和constructor详...
js原型prototype、proto和constructor详解   javascript里的关系又多又乱。作用域链是一种单向的链式关系,还算简单清晰;this机制的调用关系,稍微有些复杂;而关于原型,则是prototype、proto和constructor的三角关系。本文先用一张图开宗明义,然后详细解释原型的三角关系 图示 概念   上图中的复杂关系,实际上来源...
js让图片等比例缩放代码
js如何让图片等比例缩放呢? javascript自动按比例显示图片,按比例压缩图片显示 function AutoResizeImage(maxWidth,maxHeight,objImg){ var img = new Image(); img.src = objImg.src; var hRatio; var wRatio; var Ratio = 1; var w = img.width; var h = img.height; wRatio = ...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……