ie中点击shelect后失去onmouseover焦点的问题

javasconmouseoverselectie兼容

解决方案 »

  1.   

    你是怎么隐藏那个日历的层的，自己检查下相关代码，参考：jquery mouseleave事件：移动到子容器select的option上也会触发
      

  2.   

    IE开发人员工具，加入断点，启动调试，查看到哪里出现错误。firefox兼容性特强，但IE不是
      

  3.   

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    #weather1{
    width:30px;
    height:30px;
    background-color:#000;
    }
    #tq1{ 
    width:300px;
    height:300px;
    background-color:#F00;  position:absolute;
     top:50px;
     left:50px;
     display:none;}
    #weather{
    width:30px;
    height:30px;
    background-color:#F00;
    }
    #tq { 
    background-color:#fff;
     position:absolute;
     top:50px;
     left:50px;
     display:none;}
    </style>
    <script>
    window.onload=function ()
    {
    var oDiv1=document.getElementById('weather');
    var oDiv2=document.getElementById('tq');
    var oDiv3=document.getElementById('weather1');
    var oDiv4=document.getElementById('tq1');
    var timer=null;

    oDiv2.onmouseover=oDiv1.onmouseover=function ()
    {
    clearTimeout(timer);
    oDiv2.style.display='block';
    };
    oDiv2.onmouseout=oDiv1.onmouseout=function ()
    {
    timer=setTimeout(function (){
    oDiv2.style.display='none';
    }, 200);
    };
    var timer1=null;

    oDiv4.onmouseover=oDiv3.onmouseover=function ()
    {
    clearTimeout(timer1);
    oDiv4.style.display='block';
    };
    oDiv4.onmouseout=oDiv3.onmouseout=function ()
    {
    timer1=setTimeout(function (){
    oDiv4.style.display='none';
    }, 200);
    };
    };
    </script>
    </head><body>
    <div id="weather1"></div>
    <div id="tq1"></div>
    <div id="weather"></div><div id="tq"><table cellpadding="0" cellspacing="0" id="1">
      <tr>
        <td><style> 
    body,td,.p1,.p2,.i{font-family:arial}
    body{margin:6px 0 0 0;background-color:#fff;color:#000;}
    table{border:0}
    #cal{width:367px;border:1px solid #c3d9ff;font-size:12px;margin:0px 0 0 0px}
    #cal #top{height:29px;line-height:29px;background:#e7eef8;color:#003784;padding-left:42px}
    #cal #top select{font-size:12px}
    #cal #top input{padding:0}
    #cal ul#wk{margin:0;padding:0;height:25px}
    #cal ul#wk li{float:left;width:52px;text-align:center;line-height:25px;list-style:none}
    #cal ul#wk li b{font-weight:normal;color:#c60b02}
    #cal #cm{clear:left;border-top:1px solid #ddd;position:relative}
    #cal #cm .cell{position:absolute;width:36px;height:36px;text-align:center;margin:0 0 0 9px}
    #cal #cm .cell .so{font:bold 16px arial;}
    #cal #bm{text-align:right;height:24px;line-height:24px;padding:0 13px 0 0}
    #cal #bm a{color:7977ce}
    #cal #fd{display:none;position:absolute;border:1px solid #dddddf;background:#feffcd;padding:10px;line-height:21px;width:150px}
    #cal #fd b{font-weight:normal;color:#c60a00}
    </style>
    <!--[if IE]>
    <style>
    #cal #top{padding-top:4px}
    #cal #top input{width:65px}
    #cal #fd{width:170px}
    </style>
    <![endif]-->
          <div id="cal">
            <div id="top">公元&nbsp;
              <select>
              </select>
              &nbsp;年&nbsp;
              <select>
              </select>
              &nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;农历<span></span>年&nbsp;[&nbsp;<span></span>年&nbsp;]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <input type="button" value="回到今天" title="点击后跳转回今天" style="padding:0px">
            </div>
            <ul id="wk">
              <li>一</li>
              <li>二</li>
              <li>三</li>
              <li>四</li>
              <li>五</li>
              <li><b>六</b></li>
              <li><b>日</b></li>
            </ul>
            <div id="cm"></div>
          </div></td>
      </tr>
    </table>
    </div>
      

  4.   

    那个年前面的select在mouseover出来日历后点击下，mouseouver就失去作用了。日历就消失了。
      

  5.   

            oDiv2.onmouseout = oDiv1.onmouseout = function () {
                if (document.all && window.event.toElement == null) return;//IE下移动到option对象上toElement为空，return取消下面代码执行
                timer = setTimeout(function () {
                    oDiv2.style.display = 'none';
                }, 200);
            };