点击DIV1 弹出的Div2中的离开事件受checkbox"影响

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"> 
    <title>无标题页 </title> 
    <script type="text/javascript"> 
    function ShowDiv() 
    { 
        document.getElementById("Show").style.display = "block"; 
    } 
    
      
    function EndSelectValue() 
    { 
        document.getElementById("Show").style.display = 'none;'; 
    } 
    
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
    <div id="div1" onclick="ShowDiv()" style="visibility:visible;background-color:Red;width:80px;height:20px">12312312321 </div> 
    <div id = "Show" onmouseout='EndSelectValue()' style="background-color:Gray;width:80px;height:60px; display:none">123213 <input id="Checkbox1" type="checkbox" /> 
    </div> 
    </div> 
    </form> 
</body> 
</html> 

解决方案 »

  1.   

    倒，上面错的
    只要把
    <div id = "Show" onmouseout='EndSelectValue()' style="visibility:hidden;background-color:Gray;width:80px;height:20px">123213 
        <input id="Checkbox1" type="checkbox" /> 
        </div> 
    改为
    <div id = "Show" onMouseMove="ShowDiv()" onmouseout='EndSelectValue()' style="background-color:Gray;width:80px;height:100px; display:none">123213 
        <input id="Checkbox1" type="checkbox" />
        </div>就可以了
      

  2.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head runat="server">
            <title>无标题页 </title>
            <script type="text/javascript">
                function ShowDiv(){
                    document.getElementById("Show").style.visibility = "visible";
                }
                
                function EndSelectValue(e){
                    document.getElementById("Show").style.visibility = 'hidden';
                }
            </script>
        </head>
        <body>
            <form id="form1" runat="server">
                <div>
                <div id="div1" onclick="ShowDiv()" style="visibility:visible;background-color:Red;width:80px;height:20px">
                    12312312321 
                </div>
                <div id = "Show" onMouseOver="ShowDiv();" onmouseout='EndSelectValue();' style="visibility:hidden;background-color:Gray;width:80px;height:20px">
                    123213<input id="Checkbox1" type="checkbox" />
                </div>
            </form>
        </body>
    </html>
      

  3.   

    上面的方法虽然可以达到效果，
    但实际上在内部对象间移动的时候同时触发了mouseout,mouseove两个事件。
    也就是说经历了EndSelectValue()和ShowDiv().
    在有性能要求的情况下可能会有闪烁等影响.
    因此进行一下判断更好些.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head runat="server" id="idbody">
            <title>无标题页 </title>
            <script type="text/javascript">
                function ShowDiv(){
                    document.getElementById("Show").style.visibility = "visible";
                }
                
                function EndSelectValue(e){
                    e = e || window.event;
                    var o = e.fromElement || e.target;
                    while (o) {
                        if (o == document.getElementById("Show")) {
                            o = e.toElement || e.relatedTarget;
                            while (o) {
                                if (o == document.getElementById("Show")) {
                                    return;
                                }
                                o = o.parentNode;
                            }
                            break;
                        }
                        o = o.parentNode;
                    }
                    document.getElementById("Show").style.visibility = 'hidden';
                }
            </script>
        </head>
        <body>
            <form id="form1" runat="server">
                <div id="idbox">
                <div id="div1" onclick="ShowDiv()" style="visibility:visible;background-color:Red;width:80px;height:20px">
                    12312312321 
                </div>
                <div id = "Show" onmouseout='EndSelectValue(event);' style="visibility:hidden;background-color:Gray;width:80px;height:20px">
                    123213<input id="Checkbox1" type="checkbox" />
                </div>
            </form>
        </body>
    </html>也可以通过别的方法进行,
    比如通过当前鼠标的坐标判断.
      

  4.   

    事件的冒泡没处理，可以用contains判断下是否移动到其子元素上<html> 
    <head runat="server"> 
        <title>无标题页 </title> 
        <script type="text/javascript"> 
        //扩展ff下的contains
    if(typeof HTMLElement!="undefined")HTMLElement.prototype.contains=function(o){
      if(o==this)return true;
      while(o=o.parentNode){
        if(o==this)return true;
      }
      return false;
    }    function ShowDiv() 
        { 
            document.getElementById("Show").style.visibility = "visible"; 
        } 
        
          
        function EndSelectValue(e,o) 
        { 
         e=e||event;
         var obj=e.relatedTarget||e.toElement;
         if(o.contains(obj))return;//判断是否为子原属
            document.getElementById("Show").style.visibility = 'hidden'; 
        } 
        
        </script> 
    </head> 
    <body> 
        <form id="form1" runat="server"> 
        <div> 
        <div id="div1" onclick="ShowDiv()" style="visibility:visible;background-color:Red;width:80px;height:20px">12312312321 </div> 
        <div id = "Show" onmouseout='EndSelectValue(event,this)' style="visibility:hidden;background-color:Gray;width:80px;height:20px">123213 
        <input id="Checkbox1" type="checkbox" /> 
        </div> 
        </div> 
        </form> 
    </body> 
    </html> 
      

  5.   

    7楼说的极是，用contains可以大简单程序。
    没用过contans,学习了。
    程序这样改一下就OK了。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head runat="server" id="idbody">
            <title>无标题页 </title>
            <script type="text/javascript">
                function ShowDiv(){
                    document.getElementById("Show").style.visibility = "visible";
                }
                
                function EndSelectValue(e){
                    e = e || window.event;
    var o = document.getElementById("Show");
                    var o1 = e.fromElement || e.target;
                    var o2 = e.toElement || e.relatedTarget; if( o.contains(o1)&& o.contains(o2))
    return;                document.getElementById("Show").style.visibility = 'hidden';
                }
            </script>
        </head>
        <body>
            <form id="form1" runat="server">
                <div id="idbox">
                <div id="div1" onclick="ShowDiv()" style="visibility:visible;background-color:Red;width:80px;height:20px">
                    12312312321 
                </div>
                <div id = "Show" onmouseout='EndSelectValue(event);' style="visibility:hidden;background-color:Gray;width:80px;height:20px">
                    123213<input id="Checkbox1" type="checkbox" />
                </div>
            </form>
        </body>
    </html>