我们在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
点击文字弹出层 弹出按钮谢谢光临……



