问个很小白的问题

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

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

做个判断就行了~·或者在最外层的div上写个onclick事件或者body上~·
单击非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>
容器里面有子容器啊, 你那个target.id 不一定是"dateControl"吧
能解决，但算不上好方法。 <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>
添加onblur()事件，把日期控件的display设为“none”...
单击，判断当前的位置不为日期的div以及他的parent不为控件的div就为none
<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>
在页面的body上加onclick事件触发的时候判断弹出层div.style.display 是不是不为none
是的话div.style.display="none";
在body是写onclick事件，触发时隐藏弹出层。然后为弹出层的onclick事件加上阻止事件冒泡的方法就可以了。
其实应该是你这样写哈,不过我还是实现了,在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()
}
});
请贴下你的代码,我这个感觉性能上不是很好,我故意取的非
$("div").click(function(){
    StopEventPropagation(event);
});// 阻止事件冒泡
function StopEventPropagation(event) {
        var event = event ? event : window.event;
        if (window.event)
            event.cancelBubble = true;
        else
            event.stopPropagation();
    }