问个很小白的问题

ailin84 2011-08-11 10:46:06

做了个相当于日期选择的一个控件, 在弹出的那个div容器外单击就隐藏这个日期选择框是怎么实现的,容器里单机不隐藏

...全文

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

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

tckoo 2011-08-15

打赏
举报

$("div").click(function(){
StopEventPropagation(event);
});

// 阻止事件冒泡
function StopEventPropagation(event) {
var event = event ? event : window.event;
if (window.event)
event.cancelBubble = true;
else
event.stopPropagation();
}

ailin84 2011-08-11

打赏
举报

[Quote=引用 2 楼 truelove12 的回复:]
单击非dataControl的任意区域，隐藏dataControl

HTML code

<div style="display:block;position:absolute;border:1px solid #ccc;" id="dateControl">日期控件容器</div>

JScript code

<script type="……
[/Quote]

容器里面有子容器啊, 你那个target.id 不一定是"dateControl"吧

愚者只看星不看答案 2011-08-11

打赏
举报

单击非dataControl的任意区域，隐藏dataControl





<div style="display:block;position:absolute;border:1px solid #ccc;" id="dateControl">日期控件容器</div>





 <script type="text/javascript">

     //<![CDATA[



        var EventUtility = {



            addHandler: function (element, eventName, handler) {

                if (typeof element.addEventListener === "function")

                    element.addEventListener(eventName, handler, false);

                else if (typeof element.attachEvent === "object")

                    element.attachEvent("on" + eventName, handler);

                else

                    element["on" + eventName] = handler;

            }

        };



        function handler(event) {

            var target = event.target || event.srcElement;

            if (target.id === "dateControl") {

                if (event.stopPropagation)

                    event.stopPropagation();

                else

                    window.event.cancelBubble = true;

            }

            else {

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

            }   

        }



        var root = document.documentElement || document.body;

        EventUtility.addHandler(root, "click", handler);

        EventUtility.addHandler(document.getElementById("dateControl"), "click", handler);

 

     //]]>

    </script>

MuBeiBei 2011-08-11

打赏
举报

[Quote=引用楼主 ailin84 的回复:]
做了个相当于日期选择的一个控件, 在弹出的那个div容器外单击就隐藏这个日期选择框是怎么实现的,容器里单机不隐藏
[/Quote]

做个判断就行了~·或者在最外层的div上写个onclick事件

或者body上~·

ailin84 2011-08-11

打赏
举报

[Quote=引用 9 楼 zhuhong639 的回复:]
在body是写onclick事件，触发时隐藏弹出层。然后为弹出层的onclick事件加上阻止事件冒泡的方法就可以了。
[/Quote]

其实应该是你这样写哈,不过我还是实现了,在body的click事件里判断了下 ,用的jquery
如果触发的元素id是容器id,或者元素的父辈中包含容器id,则不隐藏



		$(document.body).click(function(event){

			if(!($(event.target).attr("id")==id || $(event.target).parents("#"+id).is("div")))

			{

				alert("需要隐藏");box.Hide()

			}

		});

请贴下你的代码,我这个感觉性能上不是很好,我故意取的非

tckoo 2011-08-11

打赏
举报

在body是写onclick事件，触发时隐藏弹出层。然后为弹出层的onclick事件加上阻止事件冒泡的方法就可以了。

s1120624175 2011-08-11

打赏
举报

在页面的body上加onclick事件触发的时候判断弹出层div.style.display 是不是不为none
是的话div.style.display="none";

MuBeiBei 2011-08-11

打赏
举报

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>





<div id="a" style="width:100%; height:100%; position:relative;">

<a href="javascript:void(0);" onclick="show(event)">点击显示层</a>

<div id="kks" style="display:none;position:absolute;top:100px;left:100px;width:160px;height:100px;background:#000;">

层内容

层内容

层内容

</div>

</div>

<script>

function show(evt){

var e =(evt)?evt:window.event;     

if (window.event) {     

e.cancelBubble =true ;     

} else {     

//e.preventDefault();     

e.stopPropagation();     

}    

document.getElementById("kks").style.display="block";

}

function _close(evt){

var e =(evt)?evt:window.event; 

e =  e.target || e.srcElement;

if(e.id != 'kks')

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

}



document.getElementById('a').onclick = _close;

</script>

</body>

</html>

tomhoneysky 2011-08-11

打赏
举报

单击，判断当前的位置不为日期的div以及他的parent不为控件的div就为none

BLUE_LG 2011-08-11

打赏
举报

添加onblur()事件，把日期控件的display设为“none”...

愚者只看星不看答案 2011-08-11

打赏
举报

能解决，但算不上好方法。





 <div class="noExists" style="display:block;position:absolute;border:1px solid #ccc;" id="dateControl">

    <div class="noExists" id="subContainer">日期控件容器</div>

    <div class="noExists">

    <button class="noExists">test</button>

    </div>

    </div>





 <script type="text/javascript">

     //<![CDATA[



        var EventUtility = {



            addHandler: function (element, eventName, handler) {

                if (typeof element.addEventListener === "function")

                    element.addEventListener(eventName, handler, false);

                else if (typeof element.attachEvent === "object")

                    element.attachEvent("on" + eventName, handler);

                else

                    element["on" + eventName] = handler;

            }

        };



        function handler(event) {

            var target = event.target || event.srcElement;

            if (target.className === "noExists") {

                if (event.stopPropagation)

                    event.stopPropagation();

                else

                    window.event.cancelBubble = true;

            }

            else {

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

            }   

        }



        var root = document.documentElement || document.body;

        EventUtility.addHandler(root, "click", handler);

        EventUtility.addHandler(document.getElementById("dateControl"), "click", handler);

 

     //]]>

    </script>