点击关闭按钮和div之外关闭div

日期:2010-12-07作者:woniu

字体大小: 小中大

cssrain 站长写的一个点击div之外关闭层的js。之前被这个问题困扰很久。

HTML代码

<BODY >
当div里面有其他子元素的时候，我加一了一个标识，来标识鼠标是在div之内，还是之外。
这个之内还是之外，通过onmouseover和onmouseout来控制这个标识的值。

<DIV id="cssrain" style="DISPLAY: none; POSITION: absolute; TOP: 206px;background:#999;height:200px;" >
divdivdivdivdivdivdivdiv<input type="button" value="Close" onclick="closediv();"/>

<SCRIPT>
function show()
{
    document.getElementById("cssrain").style.display="block";
}
function closediv(){
    document.getElementById('cssrain').style.display='none';
}

var out_div = true;//标识

function checkdiv(event){
    var event  = window.event || event;
    var obj = event.srcElement ? event.srcElement : event.target;
    if(out_div && obj!=document.getElementById('showbutton') ){
        closediv();
    }
}

document.onclick = function(event){
   checkdiv(event);
}

document.getElementById("cssrain").onmouseover = function(){
   out_div = false;
}

document.getElementById("cssrain").onmouseout = function(){
   out_div = true;
}
</SCRIPT>
</BODY>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

[本日志由 woniu 于 2010-12-07 10:08 AM 编辑]

文章来自: 本站原创

引用通告: 查看所有引用 | 我要引用此文章

Tags: js关闭 div 关闭按钮

相关日志:

评论: 3 | 引用: 0 | 查看次数: -

www.mengyaoren.com[2012-01-30 02:55 PM |

]

很有用谢谢

www.webbise.com[2010-12-14 00:08 AM |

]

很简单，但很实用

www.chnlog.com[2010-12-11 10:40 AM |

]

这个很有用，感谢了

发表评论

昵　称:
密　码:	游客发言不需要密码.
内　容:	正在加载编辑器...
验证码:
选　项:	禁止表情转换禁止自动转换链接禁止自动转换关键字

虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.