点击页面空白处就关闭某个层

xwxxl_81 2011-11-28 11:12:27

点击页面空白处就关闭某个层，如何用javascript实现

...全文

199 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

吉普赛的歌 2011-11-29

打赏
举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

    <style type="text/css">

        #inner{height: 100px;background: #cfc;}

        #middler{background: #ccf;}

        #outer{background: #fcc;}

        div{border: 1px solid blue;padding: 20px;width: 200px;}

    </style>

</head>

<body>

    <h1>点击空白处, 关闭/打开 "最里层" . 点击其它元素无效.</h1>

    <div id="outer">

        最外层

        <div id="middler">

            中间层

            <div id="inner">最里层</div>

        </div>

    </div>

</body>

</html>

<script type="text/javascript">

    var bodyObj = document.body ? document.body : document.documentElement;

    bodyObj.onclick = function (e) {

        var event = e ? e : window.event;

        var target = event.target ? event.target : event.srcElement;

        if(target===bodyObj)

            document.getElementById("inner").style.display = "none";

    }

</script>

按楼上的照猫画虎写了一个js版, 不过可以去掉(或者不去掉):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

小龙卷卷风 2011-11-29

打赏
举报

[Quote=引用 10 楼 yenange 的回复:]
JScript code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#inner……
[/Quote]
学习了。

MuBeiBei 2011-11-28

打赏
举报

[Quote=引用 2 楼 ifandui 的回复:]

document.body.onclick=function(){
//控制隐藏
}
[/Quote]

up~`

默默不得鱼 2011-11-28

打赏
举报

document.body.onclick=function(){
//控制隐藏
}

峭沙 2011-11-28

打赏
举报

		document.documentElement.onclick = function(e){

			var event = e ? e : window.event,

				target = event.target ? event.target : event.srcElement;

			alert(target === this);

			if(target === this){

				//控制隐藏

			}

		}

记得先在页面最开头写上

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

xwxxl_81 2011-11-28

打赏
举报

就像jquery autocomplete一样，点空白地方，层自动隐藏

吉普赛的歌 2011-11-28

打赏
举报

上面的只能关闭，下面的有开关的效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

    <title>MyHtml.html</title>

    <style type="text/css">

        #inner{height: 100px;background: #cfc;}

        #middler{background: #ccf;}

        #outer{background: #fcc;}

        div{border: 1px solid blue;padding: 20px;width: 200px;}

    </style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>    

    <script type="text/javascript">

        $(function () {

            $("*").click(function (event) {

                event.stopPropagation(); //阻止事件冒泡  

            });

            $("body").click(function () {

                $("#inner").toggle(!$("#inner").is(":visible"));

            });

        });  

    </script>

</head>

<body>

    <h1>点击空白处, 关闭/打开 "最里层" . 点击其它元素无效.</h1>

    <div id="outer">

        最外层

        <div id="middler">

            中间层

            <div id="inner">最里层</div>

        </div>

    </div>

</body>

</html>

吉普赛的歌 2011-11-28

打赏
举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

    <title>MyHtml.html</title>

    <style type="text/css">

        #inner{height: 100px;background: #cfc;}

        #middler{background: #ccf;}

        #outer{background: #fcc;}

        div{border: 1px solid blue;padding: 20px;width: 200px;}

    </style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>    

    <script type="text/javascript">

        $(function () {

            $("*").click(function (event) {

                event.stopPropagation(); //阻止事件冒泡  

            });

            $("body").click(function () {

                $("#inner").hide();

            });

        });  

    </script>

</head>

<body>

    <h1>点击空白处, 关闭/打开 "最里层" . 点击其它元素无效.</h1>

    <div id="outer">

        最外层

        <div id="middler">

            中间层

            <div id="inner">最里层</div>

        </div>

    </div>

</body>

</html>