事件触发函数的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style type="text/css">
        <!-- #div1 {
            position: relative;
            height: 25px;
            width: 60px;
            background-color: #FFD5AA;
        } #div2 {
            position: absolute;
            top: 25px;
            left: 0px;
            background-color: #B5FFB5;
        }
        -->
        </style>
        <script type="text/javascript">
            <!--
            window.onload = function(){
                $("div1").onmouseover = function(e){
                    if ($("div2").style.width != "0px") 
                        return;
                    $("div2").style.display = "block";
                    expand($("div2"), "+", 140, "block");
                }
                
                $("div1").onmouseout = $("div2").onmouseout = function(e){
                    e = e || window.event;
                    var elTo = e.toElement || e.relatedTarget;
                    
                    if (elTo.id == "div1" || elTo.id == "div2") {
                         return;
                    }
                    
                    if ($("div2").style.width != "140px") 
                        return;
                    
                    expand($("div2"), "-", 0, "none");
                }
            }
            
            function expand(o, fuhao, wh, dis){
                eval("var th = parseInt(o.style.height)" + fuhao + "5");
                eval("var tw = parseInt(o.style.width)" + fuhao + "5");
                o.style.height = th + "px";
                o.style.width = tw + "px";
                stop = setTimeout(function(){
                    expand(o, fuhao, wh, dis)
                }, 10);
                if (th == wh || tw == wh) {
                    clearTimeout(stop);
                    o.style.display = dis;
                }
            }
            
            function $(oid){
                return document.getElementById(oid);
            }
            
            //--> 
        </script>
    </head>
    <body>
        <div id="div1">
            <div id="div2" style="width:0px;height:0px;display:none;">
            </div>
        </div>
    </body>
</html>

解决方案 »

  1.   

    如果楼主不是在学习js，而仅仅是实现所需的效果，我建设你用jquery等一些类库，像楼主这种功能，这些类库会提供更优雅的解决方案。像类似if ($("div2").style.width != "0px") return;这样的实现方式有可能造成不同browse的兼容性问题
      

  2.   

    买有一本《jQuery基础教程》，不过看到一半觉得都是在调用jQuery API，没有JavaScript原汁原味的感觉就扔到一边去了~
      

  3.   

    又改了一下.
    不过频繁的移动还是有问题呀.
    等脑袋清醒的时候再改改吧.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <style type="text/css">
            <!-- #div1 {
                position: relative;
                height: 25px;
                width: 60px;
                background-color: #FFD5AA;
            } #div2 {
                position: absolute;
                top: 25px;
                left: 0px;
                background-color: #B5FFB5;
            }
            -->
            </style>
            <script type="text/javascript">
                <!--
                window.onload = function(){
                    $("div1").onmouseover = mouseOver;
                    function mouseOver(e){
                        e = e || window.event;
                        if ($("div2").style.width != "0px") {
                            clearTimeout(stop);
                        }
                        
                        $("div2").style.display = "block";
                        expand($("div2"), "+", 140, "block");
                    }
                    
                    $("div1").onmouseout = $("div2").onmouseout = function(e){
                        e = e || window.event;
    var elFrom = e.fromElement || e.target;
                        var elTo = e.toElement || e.relatedTarget;
                        
                        if ((elFrom.id=="div1" && elTo.id == "div2") 
    || (elFrom.id=="div2" && elTo.id == "div1")) {
     return;
                        }
                        
                        expand($("div2"), "-", 0, "none");
                    }
                }
                
                function expand(o, fuhao, wh, dis){
                    if (parseInt(o.style.height) == wh || parseInt(o.style.height) == wh) {
                        clearTimeout(stop);
                        o.style.display = dis;
                        return;
                    }                eval("var th = parseInt(o.style.height)" + fuhao + "5");
                    eval("var tw = parseInt(o.style.height)" + fuhao + "5");
                    o.style.height = th + "px";
                    o.style.width = tw + "px";
                    stop = setTimeout(function(){
                        expand(o, fuhao, wh, dis)
                    }, 10);
                }
                
                function $(oid){
                    return document.getElementById(oid);
                }
                
                //--> 
            </script>
        </head>
        <body>
            <div id="div1">
                <div id="div2" style="width:0px;height:0px;display:none;">
                </div>
            </div>
        </body>
    </html>
      

  4.   

    扩展ff下的contains，然后判断下是否包含就可以了
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">
    <!--
       #div1{position:relative;height:25px;width:60px;background-color:#FFD5AA;}
       #div2{position:absolute;top:25px;left:0px;background-color:#B5FFB5;}
    -->
    </style>
    <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;
       }
       window.onload=function(){
           $("div1").onmouseover=function(){
               if ($("div2").style.width != "0px") return;
               $("div2").style.display = "block";
               expand($("div2"),"+",140,"block");
           }
           $("div1").onmouseout=function(e){//---------------
               e=e||event;//---------------
               var toObj=e.toElement||e.relatedTarget;//---------------
               if(this.contains(toObj))return;//---------------
               if ($("div2").style.width != "140px") return;
               expand($("div2"),"-",0,"none"); 
           }
       }
       function expand(o,fuhao,wh,dis){
           eval("var th = parseInt(o.style.height)"+fuhao+"5");
           eval("var tw = parseInt(o.style.width)"+fuhao+"5");
           o.style.height = th+"px";
           o.style.width = tw+"px";
           stop = setTimeout(function(){ expand(o,fuhao,wh,dis) },10);
           if (th == wh || tw == wh){
               clearTimeout(stop);
               o.style.display = dis;
           }
       }
       function $(oid){
           return document.getElementById(oid);
       }
    //-->
    </script>
    </head>
    <body>
       <div id="div1">
           <div id="div2" style="width:0px;height:0px;display:none;"></div>
       </div>
    </body>
    </html>
      

  5.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <style type="text/css">
            <!-- #div1 {
                position: relative;
                height: 25px;
                width: 60px;
                background-color: #FFD5AA;
            } #div2 {
                position: absolute;
                top: 25px;
                left: 0px;
                background-color: #B5FFB5;
            }
            -->
            </style>
            <script type="text/javascript">
                <!--
                var stop = null;
                window.onload = function(){
                    $("div1").onmouseover = mouseOver;
                    function mouseOver(e){
                        e = e || window.event;
                        if (stop) {
                            clearTimeout(stop);
                        }
                        $("div2").style.display = "block";
                        expand($("div2"), "+", 140, "block");
                    }
                    $("div1").onmouseout = $("div2").onmouseout = function(e){
                        e = e || window.event;
                        var elFrom = e.fromElement || e.target;
                        var elTo = e.toElement || e.relatedTarget;
                        
                        if ((elFrom.id == "div1" && elTo.id == "div2") ||
                        (elFrom.id == "div2" && elTo.id == "div1")) {
                            return;
                        }
                        if (stop) {
                            clearTimeout(stop);
                        }
                        expand($("div2"), "-", 0, "none");
                    }
                }
                function expand(o, fuhao, wh, dis){
                    if (parseInt(o.style.height) == wh ||
                    parseInt(o.style.height) == wh) {
                        clearTimeout(stop);
                        o.style.display = dis;
                        stop = null;
                        return;
                    }
                    eval("var th = parseInt(o.style.height)" + fuhao + "5");
                    eval("var tw = parseInt(o.style.height)" + fuhao + "5");
                    o.style.height = th + "px";
                    o.style.width = tw + "px";
                    stop = setTimeout(function(){
                        expand(o, fuhao, wh, dis)
                    }, 10);
                }
                
                function $(oid){
                    return document.getElementById(oid);
                } //-->  
            </script>
        </head>
        <body>
            <div id="div1">
                <div id="div2" style="width:0px;height:0px;display:none;">
                </div>
            </div>
        </body>
    </html>
      

  6.   

    思路
    div1 out的时候开始计时 yt = setTimeout(expand, 50); 
    div2 over的时候如果有div1的计时器就清除掉, 不让他执行 expand, clearTimeout(yt);代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">
    <!--
       #div1{position:relative;height:25px;width:60px;background-color:#FFD5AA;}
       #div2{position:absolute;top:25px;left:0px;background-color:#B5FFB5;}
    -->
    </style>
    <script type="text/javascript">
    <!--
       window.onload=function(){
    var yt = null;
           $("div1").onmouseover=function(){
       if(yt) clearTimeout(yt);
               if ($("div2").style.width != "0px") return;
               $("div2").style.display = "block";
               expand($("div2"),"+",140,"block");
           }
           $("div1").onmouseout=function(){
               if ($("div2").style.width != "140px") return;
       if(yt) clearTimeout(yt);
               yt = setTimeout(function(){
    expand($("div2"),"-",0,"none")
    }, 50);
           }
           $("div2").onmouseover=function(){
              clearTimeout(yt);
           }
       $("div2").onmouseout=function(){
    if(yt) clearTimeout(yt);
    yt = setTimeout(function(){
    expand($("div2"),"-",0,"none")
    }, 50);
           }
       }
       function expand(o,fuhao,wh,dis){
           eval("var th = parseInt(o.style.height)"+fuhao+"5");
           eval("var tw = parseInt(o.style.width)"+fuhao+"5");
           o.style.height = th+"px";
           o.style.width = tw+"px";
           stop = setTimeout(function(){ expand(o,fuhao,wh,dis) },10);
           if (th == wh || tw == wh){
               clearTimeout(stop);
               o.style.display = dis;
           }
       }
       function $(oid){
           return document.getElementById(oid);
       }
    //-->
    </script>
    </head>
    <body>
       <div id="div1">
           <div id="div2" style="width:0px;height:0px;display:none;"></div>
       </div>
    </body>
    </html>
      

  7.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">
    <!--
       #div1{position:relative;height:25px;width:60px;background-color:#FFD5AA;}
       #div2{position:absolute;top:25px;left:0px;background-color:#B5FFB5;}
    -->
    </style>
    <script type="text/javascript">
    <!--
       window.onload=function(){
            var yt = null;
           $("div1").onmouseover=function(){
               if(yt) clearTimeout(yt);
               if ($("div2").style.width != "0px") return;
               $("div2").style.display = "block";
               expand($("div2"),"+",140,"block");
           }
           $("div1").onmouseout=function(){
               if ($("div2").style.width != "140px") return;
               if(yt) clearTimeout(yt);
               yt = setTimeout(function(){
                    expand($("div2"),"-",0,"none")
                }, 50);
           }
           $("div2").onmouseover=function(){
              clearTimeout(yt);
           }
           $("div2").onmouseout=function(){
                if(yt) clearTimeout(yt);
                yt = setTimeout(function(){
                    expand($("div2"),"-",0,"none")
                }, 50);
           }
       }
       function expand(o,fuhao,wh,dis){
           eval("var th = parseInt(o.style.height)"+fuhao+"5");
           eval("var tw = parseInt(o.style.width)"+fuhao+"5");
           o.style.height = th+"px";
           o.style.width = tw+"px";
           stop = setTimeout(function(){ expand(o,fuhao,wh,dis) },10);
           if (th == wh || tw == wh){
               clearTimeout(stop);
               o.style.display = dis;
           }
       }
       function $(oid){
           return document.getElementById(oid);
       }
    //-->
    </script>
    </head>
    <body>
       <div id="div1">
           <div id="div2" style="width:0px;height:0px;display:none;"></div>
       </div>
    </body>
    </html>
    楼上的可以！
      

  8.   


    将鼠标移动到div1中，
    并在div2放大的过程中。
    迅速将鼠标移出div1,
    div2仍然被显示出来了。
    ......
      

  9.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">
    <!--
       #div1{position:relative;height:25px;width:60px;background-color:#FFD5AA;}
       #div2{position:absolute;top:25px;left:0px;background-color:#B5FFB5;}
    -->
    </style>
    <script type="text/javascript">
    <!--
    window.onload = function(){
    var t, div1 = $('div1'), div2=$('div2'), maxw = 140;
    div2.t = null;
    div1.onmouseover = function(){
    if(t) clearTimeout(t);
    status = div2.t;
    if(div2.offsetWidth >= maxw) return;
    div2.style.display = 'block';
    clearInterval(div2.t);
    div2.t = setInterval(function(){ expand(div2, 1, maxw);}, 10);
    } div1.onmouseout = function(){
    if(div2.offsetWidth < maxw){
    clearInterval(div2.t);
    div2.t = setInterval(function(){ expand(div2, 0)}, 10);
    }else{
    t = setTimeout(function(){
    div2.t = setInterval(function(){ expand(div2, 0)}, 10);
    }, 1);
    }
    }
    }   function expand(obj, s, w){
    if(s){
    if(obj.offsetWidth>=w){
    clearTimeout(obj.t);
    }else{
    obj.style.width = obj.offsetWidth + 5 +'px';
    obj.style.height = obj.offsetHeight + 5 +'px';
    }
    }else{
    if(obj.offsetWidth<=0){
    clearInterval(obj.t);
    obj.style.display = 'none';
    }else{
    obj.style.width = obj.offsetWidth - 5 +'px';
    obj.style.height = obj.offsetHeight - 5 +'px';
    }
    }
       }   function $(oid){
           return document.getElementById(oid);
       }
    //-->
    </script>
    </head>
    <body>
       <div id="div1">
           <div id="div2" style="width:0px;height:0px;display:none;"></div>
       </div>
    </body>
    </html>
      

  10.   

    11楼的要好一些，
    不好鼠标快速的在div1中移入移出几次后，
    div2就再也不动了。