mouseout and border???


既然两个DIV一样大，那么为什么不给外面那个DIV加上onmouseout事件呢？

解决方案 »

  1.   

    我的问题是  我希望toElement不是外面的的那个div，
    冒泡解决不了 外面的div加事件也解决不了            这是个人认为（如果1楼 2楼的觉得解决的了 我贴代码 在加100分..........）
      

  2.   

    搞个嵌套的CSS的就可以了啊里面的改外面的className 
    className="praentX sonX";子层mouseout的时候，把父层的 className="praentX";
    父层mouseout的时候，把 className="";
      

  3.   

    把.div加上个border:1px solid #666666;
    把.list1 ,list2 中的border:1px solid #666666;去掉  然后缓慢移出 ,就可以看到错误,原因就是我上面说的<style type="text/css">
    body,td,th {font-size: 12px;}
    .title{ height:20px; width:100px; background-color:#0099FF; border:1px solid #666666; margin:3px;; position:relative; float:left; text-align:center; vertical-align:middle; line-height:20px;}
    .div{width:150px; height:auto; position:absolute; cursor:pointer;}
    .list1{ height:auto; width:100%; padding:3px;border:1px solid #666666;background-color:#FFFFFF;color: #000000}
    .list2{ height:auto; width:100%; padding:3px;border:1px solid #666666; background-color:#3b97d3; color: #FFFFFF;}
    </style>
    <body>
    <div id='All'>
    <div class="title"></div>
    <div class="title"></div>
    <div class="title"></div>
    </div>
    <script>    var stack = new Array();
        var menu = [
          {"txt":"人族","menu":[{"txt":"大法师","menu":[{"txt":"水元素"},{"txt":"暴风雪"},{"txt":"辉煌光环"},{"txt":"瞬间移动"}]},
                                    {"txt":"山丘之王","menu":[{"txt":"风暴之锤"},{"txt":"锥地"},{"txt":"锥晕"},{"txt":"天神下凡"}]},
                                    {"txt":"圣骑士","menu":[{"txt":"光"},{"txt":"无敌"},{"txt":"光环"},{"txt":"复活"}]},
                                    {"txt":"血法师","menu":[{"txt":"火焰"},{"txt":"吸蓝"},{"txt":"虚无"},{"txt":"神鸟凤凰"}]} ]},
          {"txt":"兽族","menu":[{"txt":"贱圣","menu":[{"txt":"疾风步"},{"txt":"影分身"},{"txt":"致命一击"},{"txt":"剑刃风暴"}]},
                                    {"txt":"先知男","menu":[{"txt":"狼"},{"txt":"日"},{"txt":"闪电链"},{"txt":"地震"}]},
                                    {"txt":"牛头人酋长","menu":[{"txt":"冲击波"},{"txt":"阵地"},{"txt":"耐久光环"},{"txt":"复活"}]},
                                    {"txt":"小YY","menu":[{"txt":"变动物"},{"txt":"治疗波"},{"txt":"小蛇棒子"},{"txt":"全体无敌"}]}
                                    ]},
          {"txt":"不死族","menu":[
                                    {"txt":"死亡骑士","menu":[{"txt":"大便"},{"txt":"光环"},{"txt":"吃人"},{"txt":"复尸体","menu":[
                                                                                         {"txt":"尸体"},{"txt":"40秒"},{"txt":"无敌"}] }]},
                                    {"txt":"巫妖","menu":[{"txt":"暴冰"},{"txt":"冰甲"},{"txt":"吃人"},{"txt":"死亡凋零"}]},
                                    {"txt":"恐惧魔王","menu":[{"txt":"蝙蝠"},{"txt":"睡觉"},{"txt":"吸血光环"},{"txt":"黄色石头人"}
                                                                ]},
                                    {"txt":"小强王子"}
                                    ]}
       ]  
    function $(Id){return document.getElementById(Id)}
    function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)};   
    function initialize(){
        var divs = $('All').getElementsByTagName('div');
        for(var i = 0; i<divs.length;i++)
        {
             divs[i].innerHTML = menu[i].txt;
             (function(i){
                 addListener(divs[i],'mouseover',function(){makemenu(menu[i],divs[i],true)});
                 addListener(divs[i],'mouseout',function(event){remove(event,divs[i],true)});
             })(i);
        }
    }function create(elm,parent,fn){
        var element = document.createElement(elm);
        if(fn)fn(element)
        parent.appendChild(element);
    }function remove(e,elm,oo){
        if(!oo)elm.className='list1';
        e = e || event;
        var obj = e.relatedTarget||e.toElement;
        var index = 0;
        var exist =false;
        for(;index<stack.length;index++){
          if(judge(stack[index],obj)){exist =true;break;}
        }    if(!exist)
        {
           for(var i=0;i<stack.length;i++)
              {document.body.removeChild(stack[i])}
               stack=[];
        }
        else
        {
            for(var i=index+1 ;i<stack.length;i++)
            {
             document.body.removeChild(stack[i]);
            }
           stack.length = index+1;
        }
    }function makemenu(data,obj,oo){
        if(!oo){obj.className='list2'};
        if(!data.menu) return;
        var Xy = position(obj);
        var scrap = document.createDocumentFragment();
        for(var i = 0;i<data.menu.length;i++)
        {
             var pack = data.menu[i];
             create('div',scrap,function(obj){
             obj.className = 'list1';
             obj.innerHTML = pack.menu?("→"+pack.txt):("　"+pack.txt);
             (function(pack){addListener(obj,'mouseover',function(){makemenu(pack,obj)})})(pack);
             addListener(obj,'mouseout',function(event){remove(event,obj)})
             });
        }
        
        create('div',document.body,function(obj){
        obj.className  ='div';
        obj.style.left = (oo?Xy[0]:(Xy[0]+Xy[2]));
        obj.style.top  = (oo?(Xy[1]+Xy[3]):Xy[1]);
        obj.appendChild(scrap)
        stack.push(obj);
        })}function position(elm){
        var height = elm.offsetHeight;
        var width  = elm.offsetWidth;
        var left =elm.offsetLeft;
        var top  =elm.offsetTop;
        while(elm=elm.offsetParent){
        left =left+ elm.offsetLeft;
        top  =top+ elm.offsetTop;
        };
        return [left,top,width,height]
    }function judge(parent,child){
        if(parent == child) return true;
        while(child=child.parentNode){if(child==parent)return true;}
        return false;
    }initialize();
    </script>
    </body> 
      

  4.   

    CSS改成这样,看是你要的不<style type="text/css">
    body,td,th {font-size: 12px;}
    .title{ height:20px; width:100px; background-color:#0099FF; border:1px solid #666666; margin:3px; position:relative; float:left; text-align:center; vertical-align:middle; line-height:20px;}
    .div{width:150px; height:auto; position:absolute; cursor:pointer;}
    .list1{ height:auto; width:100%; padding:3px;border:1px solid #666666;background-color:#FFFFFF;color: #000000;position:relative;z-index:1;margin-top:-1px;}
    .list2{ height:auto; width:100%; padding:3px;border:1px solid #666666;border:none; background-color:#3b97d3; color: #FFFFFF;margin-left:-1px;}
    </style>
      

  5.   

    IE6 下 测试没有发现Bug。  .......
      

  6.   

    to9楼:不是的
    前面发的把错误隐藏掉了,因为没有显示外部的边框  所以不会有问题
    会出现错误的代码如下 （快速移出可以  缓慢移出不行）<style type="text/css">
    body,td,th {font-size: 12px;}
    .title{ height:20px; width:100px; background-color:#0099FF; border:1px solid #666666; margin:3px;; position:relative; float:left; text-align:center; vertical-align:middle; line-height:20px;}
    .div{width:150px; height:auto; position:absolute; cursor:pointer;border:1px solid #666666; padding:3px; background-color:#FFFFFF}
    .list1{ height:auto; width:144; padding:3px;background-color:#FFFFFF;color: #000000}
    .list2{ height:auto; width:144; padding:3px;background-color:#3b97d3; color: #FFFFFF;}
    </style>
    <body><br><br><br>
    <div id='All'>
    <div class="title"></div>
    <div class="title"></div>
    <div class="title"></div>
    </div>
    <script>    var stack = new Array();
        var menu = [
          {"txt":"人族","menu":[{"txt":"大法师","menu":[{"txt":"水元素"},{"txt":"暴风雪"},{"txt":"辉煌光环"},{"txt":"瞬间移动"}]},
                                    {"txt":"山丘之王","menu":[{"txt":"风暴之锤"},{"txt":"锥地"},{"txt":"锥晕"},{"txt":"天神下凡"}]},
                                    {"txt":"圣骑士","menu":[{"txt":"光"},{"txt":"无敌"},{"txt":"光环"},{"txt":"复活"}]},
                                    {"txt":"血法师","menu":[{"txt":"火焰"},{"txt":"吸蓝"},{"txt":"虚无"},{"txt":"神鸟凤凰"}]} ]},
          {"txt":"兽族","menu":[{"txt":"贱圣","menu":[{"txt":"疾风步"},{"txt":"影分身"},{"txt":"致命一击"},{"txt":"剑刃风暴"}]},
                                    {"txt":"先知男","menu":[{"txt":"狼"},{"txt":"日"},{"txt":"闪电链"},{"txt":"地震"}]},
                                    {"txt":"牛头人酋长","menu":[{"txt":"冲击波"},{"txt":"阵地"},{"txt":"耐久光环"},{"txt":"复活"}]},
                                    {"txt":"小YY","menu":[{"txt":"变动物"},{"txt":"治疗波"},{"txt":"小蛇棒子"},{"txt":"全体无敌"}]}
                                    ]},
          {"txt":"不死族","menu":[
                                    {"txt":"死亡骑士","menu":[{"txt":"大便"},{"txt":"光环"},{"txt":"吃人"},{"txt":"复尸体","menu":[
                                                                                         {"txt":"尸体"},{"txt":"40秒"},{"txt":"无敌"}] }]},
                                    {"txt":"巫妖","menu":[{"txt":"暴冰"},{"txt":"冰甲"},{"txt":"吃人"},{"txt":"死亡凋零"}]},
                                    {"txt":"恐惧魔王","menu":[{"txt":"蝙蝠"},{"txt":"睡觉"},{"txt":"吸血光环"},{"txt":"黄色石头人"}
                                                                ]},
                                    {"txt":"小强王子"}
                                    ]}
       ]  
    function $(Id){return document.getElementById(Id)}
    function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)};   
    function initialize(){
        var divs = $('All').getElementsByTagName('div');
        for(var i = 0; i<divs.length;i++)
        {
             divs[i].innerHTML = menu[i].txt;
             (function(i){
                 addListener(divs[i],'mouseover',function(){makemenu(menu[i],divs[i],true)});
                 addListener(divs[i],'mouseout',function(event){remove(event,divs[i],true)});
             })(i);
        }
    }function create(elm,parent,fn){
        var element = document.createElement(elm);
        if(fn)fn(element)
        parent.appendChild(element);
    }function remove(e,elm,oo){
        //if(!oo)elm.className='list1';
        e = e || event;
        var obj = e.relatedTarget||e.toElement;
        var index = 0;
        var exist =false;
        for(;index<stack.length;index++){
          if(judge(stack[index],obj)){exist =true;break;}
        }    if(!exist)
        {
           for(var i=0;i<stack.length;i++)
              {document.body.removeChild(stack[i])}
               stack=[];
        }
        else
        {
            for(var i=index+1 ;i<stack.length;i++)
            {
             document.body.removeChild(stack[i]);
            }
           stack.length = index+1;
        }
    }function makemenu(data,obj,oo){
        if(!oo){
    for(var i=0;i<obj.parentNode.getElementsByTagName('div').length;i++)
    {obj.parentNode.getElementsByTagName('div')[i].className="list1"}
    obj.className="list2";
    };
        if(!data.menu) return;
        var Xy = position(obj);
        var scrap = document.createDocumentFragment();
        for(var i = 0;i<data.menu.length;i++)
        {
             var pack = data.menu[i];
             create('div',scrap,function(obj){
             obj.className = 'list1';
             obj.innerHTML = pack.menu?("→"+pack.txt):("　"+pack.txt);
             (function(pack){addListener(obj,'mouseover',function(){makemenu(pack,obj)})})(pack);
             addListener(obj,'mouseout',function(event){remove(event,obj)})
             });
        }
        
        create('div',document.body,function(obj){
        obj.className  ='div';
        obj.style.left = (oo?Xy[0]:(Xy[0]+Xy[2]-3));
        obj.style.top  = (oo?(Xy[1]+Xy[3]):Xy[1]+1);
        obj.appendChild(scrap)
        stack.push(obj);
        })}function position(elm){
        var height = elm.offsetHeight;
        var width  = elm.offsetWidth;
        var left =elm.offsetLeft;
        var top  =elm.offsetTop;
        while(elm=elm.offsetParent){
        left =left+ elm.offsetLeft;
        top  =top+ elm.offsetTop;
        };
        return [left,top,width,height]
    }function judge(parent,child){
        if(parent == child) return true;
        while(child=child.parentNode){if(child==parent)return true;}
        return false;
    }initialize();
    </script>
    </body>