这个下拉菜单哪里出问题了？

在IE6和IE7下鼠标移动到子菜单超过#list高度的子菜单就隐藏了。
要是把头部的声明去掉就正常了。
这是什么原因啊 ？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
  <title> New Document </title>
  <style type="text/css">
.wrap{width:120px;margin:0 auto;}
*{padding:0;margin:0;}
ul{list-style:none}
ul li{height:25px;line-height:25px;font-size:12px;border:1px solid #ccc;border-bottom-width:0;position:relative}
ul li ul{position:absolute;right:-120px;top:-1px;width:120px;display:none}
  </style>
<script type="text/javascript">
var arr = ["list"];
function changeList(){
for(var i=0; i<arr.length; i++){
var item = document.getElementById(arr[i]).getElementsByTagName("ul");
for(var j=0; j<item.length; j++){
item[j].parentNode.onmouseover = function(){
this.getElementsByTagName("ul")[0].style.display = "block";
this.style.background = "orange";
}
item[j].parentNode.onmouseout = function(){
this.getElementsByTagName("ul")[0].style.display = "none";
this.style.background = "#fff";
}
}
}
}
window.onload = changeList;
</script>
 </head>
 <body>
  
<div class="wrap">
<ul id="list">
<li><a href="">标题</a></li>
<li>
<a href="">标题</a>
<ul>
<li><a href="">小列表</a></li>
<li><a href="">小列表</a></li>
<li><a href="">小列表</a></li>
<li><a href="">小列表</a></li>
<li style="border-bottom:1px solid #ccc"><a href="">小列表</a></li>
</ul>
</li>
<li><a href="">标题</a></li>
<li><a href="">标题</a></li>
<li style="border-bottom:1px solid #ccc">
<a href="">标题</a>
<ul>
<li><a href="">小列表</a></li>
<li><a href="">小列表</a>
<ul>
<li><a href="">小列表</a></li>
<li><a href="">小列表</a></li>
<li><a href="">小列表</a></li>
<li><a href="">小列表</a></li>
<li style="border-bottom:1px solid #ccc"><a href="">小列表</a></li>
</ul>
</li>
<li><a href="">小列表</a></li>
<li><a href="">小列表</a></li>
<li style="border-bottom:1px solid #ccc"><a href="">小列表</a></li>
</ul>
</li>
</ul>
</div>
 </body>
</html>

解决方案 »

  1.   

    鼠标移到UL时，触发了LI 的 mouseout 解决HTML内部元素的Mouse事件干扰话说有一个DIV元素，其内部有一个IMG元素和SPAN元素，不用理会这两个内部元素怎么布局，这不是我要讨论的重点。为了实现一些特殊的效果，我需要利用TD的onmouseover和onmouseout事件，测试时就会发现如下的状况：当鼠标移入DIV内部时，onmouseover事件被触发；接着再鼠标移动到DIV内部的IMG或者SPAN元素之上，我们肯定不会认为这时鼠标已经移到了DIV的外边，但奇怪的是onmouseout事件触发了，而且紧接着onmouseover事件也马上被触发了。这可不是我想要的，那么怎么来&ldquo;屏蔽&rdquo;内部元素给外层元素带来的Javascript事件干扰呢？这里列举两种方法：一. setTimeout因为在鼠标移动到内部元素之上而触发了外层元素的onmouseout事件后，外层元素的onmouseover也会马上触发，所以我们只需要把外层元素的onmouseout事件需要执行的动作延迟很短的一段时间来运行，然后在onmouseover事件中再执行clearTimeout方法，这样就可以避免内部元素引起的事件干扰。具体的执行过程请看下图（纵向的虚线表示时间）： 
    这是个很巧妙的的方法，因为当onmouseout触发后，实质性的方法并没有马上执行，而是要等待一小段时间。如果在这段时间里马上又触发了 onmouseover事件，那么基本上就可以肯定onmouseout事件的触发是因为内部元素的干扰了，所以在onmouseover事件中使用 clearTimeout来阻止延时的方法执行。二.contains在onmouseover时先进行如下判断，结果为true时再执行方法体：
    var s = e.fromElement || e.relatedTarget ;
    if(!this.contains(s)){MouseOverFunc()}在onmouseout时先进行如下判断，结果为true时再执行方法体：
    var s = e.toElement || e.relatedTarget ;
    if(!this.contains(s)){MouseOutFunc()}
     下面来解释一下上面两行代码的含义：在IE中，所有的HTML元素都有一个contains方法，它的作用是判断当前元素内部是否包含指定的元素。我们利用这个方法来判断外层元素的事件是不是因为内部元素而被触发，如果内部元素导致了不需要的事件被触发，那我们就忽略这个事件。event.fromElement指向触发onmouseover和onmouseout事件时鼠标离开的元素；event.toElement指向触发onmouseover和onmouseout事件时鼠标进入的元素。那么上面两行代码的含义就分别是：○ 当触发onmouseover事件时，判断鼠标离开的元素是否是当前元素的内部元素，如果是，忽略此事件；○ 当触发onmouseout事件时，判断鼠标进入的元素是否是当前元素的内部元素，如果是，忽略此事件；这样，内部元素就不会干扰外层元素的onmouseover和onmouseout事件了。但问题又来了，非IE的浏览器并不支持contains函数，不过既然我们已经知道了contains函数的作用，就可以自行添加如下的代码来为非IE浏览器增加contains支持：if(typeof(HTMLElement) != "undefined"){HTMLElement.prototype.contains = function(obj){            while(obj != null &&  typeof(obj.tagName) != "undefined")            {if(obj == this)return true;obj = obj.parentNode;}   return false;  };  }
      

  2.   

     首页|资讯|移动|云计算|空间|论坛|博客|下载|网摘|程序员|书店|培训充电
    欢迎您：axin36520101688|退出|帮助     
    【博客】拥抱变化——可扩展性杂谈
    谷歌推一系列搜索新特性 改善用户体验
    Twitter新推“关注推荐”功能：可建议好友关注他人
    【评论】为什么苹果选择Twitter而不是Facebook
    微软申请新商标或为Kinect开发互动广告平台
    【观点】如何判断开发语言的复杂度？
    Nokia CEO：下一步会与谁合作？
    点评三星Smart TV智能电视
    太震撼了！首次参加IDF有感
    【教程】基于VC色温图效果实现
    【教程】游戏技巧特效处理
    Firefox 4在meego上成功安装
    IDF2011：多图详解MeeGo 3月后正式发布
    PayPal助力移动支付应用
    Android应用换电视，前30名有效！
    【教程】笔记本安装MeeGo
    微软BI解决方案开发简介
    下载Windows Phone 中文培训包
    下载 Windows Phone 开发工具
    全新Windows Phone 开发中心
    VS2010 SharePoint 入门
    【免费下载】WebMatrix建站工具
    AIX 专区有奖话题讨论
    4.21日Adobe企业RIA开发者研讨会
    【周周有礼】获奖其实很简单，不信来试试！
    2011云计算北京研讨会 6.22
    企业信息化也会亚健康，1分钟调研拿iPad2
    Qt 4.7.3编译MYsql驱动
    羡慕嫉妒恨！MeeGO平板到手
    MeeGo SDK 1.2 for Linux 初窥
    2011台北国际电脑展开幕（5.31-6.4）
    关于QT编程入门的那些事
    相见 ——“人生若只如初见”
    游戏远程代码注入和动态连接库的使用
    哥是传奇—组团参赛心得
    【教程】Windows平台下MeeGo v1.2 SDK的安装
    MeeGo 1.2 正式版发布
    在生命走到尽头前用脚贡献了最后一个代码补丁
    浅谈QT中窗口刷新事件
    赢笔记本电脑，提升管理软件新水平！
    【教程】安装MeeGO和Windows 7双系统的方法
    分享我的个人初赛体会
    Nokia宣布Qt 5计划
    立即加入IBM dW，万千技术尽网罗
    Linux 上简单的MeeGo 开发 QT 程序
    软件产品性能优化注意事项
    用C#实现HTTP协议下的多线程文件传输
    【实战】搭建Meego Tablet开发测试平台
    AppUp Center为更多程序员创造机会
    【源码分享】一个多线程下载文件的程序
    轻松漫画聊快速构建网站
    如何创建一个简单的Qt应用程序
    【赢取旧金山之旅】2011线程挑战赛
    【图】爱上NOOK COLOR的5个理由
    IPAD&amp;NOOK COLOR屏幕对比多图
    【教程】AppUp 进阶基础篇
    <<>>【在校大学生必看！】
    和华为智汇云一起走向世界
    CSDN-CSDN社区-Web 开发-JavaScript
    管理菜单
    结  帖
    发  帖
    回  复
    收藏 这个下拉菜单哪里出问题了？[问题点数:20分]rao3324180
    (rao3324180)
    等　级：
    结帖率：88.89%
    楼主发表于：2011-06-15 00:44:13
    在IE6和IE7下鼠标移动到子菜单超过#list高度的子菜单就隐藏了。
    要是把头部的声明去掉就正常了。
    这是什么原因啊 ？
    HTML code
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
     <head>
      <title> New Document </title>
      <style type="text/css">
        .wrap{width:120px;margin:0 auto;}
        *{padding:0;margin:0;}
        ul{list-style:none}
        ul li{height:25px;line-height:25px;font-size:12px;border:1px solid #ccc;border-bottom-width:0;position:relative}
        ul li ul{position:absolute;right:-120px;top:-1px;width:120px;display:none}
      </style>
        <script type="text/javascript">
            var arr = ["list"];
            function changeList(){
                for(var i=0; i<arr.length; i++){
                    var item = document.getElementById(arr[i]).getElementsByTagName("ul");
                    for(var j=0; j<item.length; j++){
                        item[j].parentNode.onmouseover = function(){
                            this.getElementsByTagName("ul")[0].style.display = "block";
                            this.style.background = "orange";
                        }
                        item[j].parentNode.onmouseout = function(){
                            this.getElementsByTagName("ul")[0].style.display = "none";
                            this.style.background = "#fff";
                        }
                    }
                }
            }
            window.onload = changeList;
        </script>
     </head>
     <body>
      
            <div class="wrap">
                <ul id="list">
                    <li><a href="">标题</a></li>
                    <li>
                        <a href="">标题</a>
                        <ul>
                            <li><a href="">小列表</a></li>
                            <li><a href="">小列表</a></li>
                            <li><a href="">小列表</a></li>
                            <li><a href="">小列表</a></li>
                            <li style="border-bottom:1px solid #ccc"><a href="">小列表</a></li>
                        </ul>
                    </li>
                    <li><a href="">标题</a></li>
                    <li><a href="">标题</a></li>
                    <li style="border-bottom:1px solid #ccc">
                        <a href="">标题</a>
                        <ul>
                            <li><a href="">小列表</a></li>
                            <li><a href="">小列表</a>
                                <ul>
                                    <li><a href="">小列表</a></li>
                                    <li><a href="">小列表</a></li>
                                    <li><a href="">小列表</a></li>
                                    <li><a href="">小列表</a></li>
                                    <li style="border-bottom:1px solid #ccc"><a href="">小列表</a></li>
                                </ul>
                            </li>
                            <li><a href="">小列表</a></li>
                            <li><a href="">小列表</a></li>
                            <li style="border-bottom:1px solid #ccc"><a href="">小列表</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
     </body>
    </html>
    对我有用[0]丢个板砖[0]引用举报管理TOP 回复次数：1
    hch126163
    (老胡)
    等　级：
    2
    #1楼 得分：0回复于：2011-06-15 09:04:08
    鼠标移到UL时，触发了LI 的 mouseout  解决HTML内部元素的Mouse事件干扰话说有一个DIV元素，其内部有一个IMG元素和SPAN元素，不用理会这两个内部元素怎么布局，这不是我要讨论的重点。为了实现一些特殊的效果，我需要利用TD的onmouseover和onmouseout事件，测试时就会发现如下的状况：当鼠标移入DIV内部时，onmouseover事件被触发；接着再鼠标移动到DIV内部的IMG或者SPAN元素之上，我们肯定不会认为这时鼠标已经移到了DIV的外边，但奇怪的是onmouseout事件触发了，而且紧接着onmouseover事件也马上被触发了。这可不是我想要的，那么怎么来&ldquo;屏蔽&rdquo;内部元素给外层元素带来的Javascript事件干扰呢？这里列举两种方法：一. setTimeout因为在鼠标移动到内部元素之上而触发了外层元素的onmouseout事件后，外层元素的onmouseover也会马上触发，所以我们只需要把外层元素的onmouseout事件需要执行的动作延迟很短的一段时间来运行，然后在onmouseover事件中再执行clearTimeout方法，这样就可以避免内部元素引起的事件干扰。具体的执行过程请看下图（纵向的虚线表示时间）： 
    这是个很巧妙的的方法，因为当onmouseout触发后，实质性的方法并没有马上执行，而是要等待一小段时间。如果在这段时间里马上又触发了 onmouseover事件，那么基本上就可以肯定onmouseout事件的触发是因为内部元素的干扰了，所以在onmouseover事件中使用 clearTimeout来阻止延时的方法执行。二.contains在onmouseover时先进行如下判断，结果为true时再执行方法体：
    var s = e.fromElement || e.relatedTarget ;
    if(!this.contains(s)){MouseOverFunc()}在onmouseout时先进行如下判断，结果为true时再执行方法体：
    var s = e.toElement || e.relatedTarget ;
    if(!this.contains(s)){MouseOutFunc()}
     下面来解释一下上面两行代码的含义：在IE中，所有的HTML元素都有一个contains方法，它的作用是判断当前元素内部是否包含指定的元素。我们利用这个方法来判断外层元素的事件是不是因为内部元素而被触发，如果内部元素导致了不需要的事件被触发，那我们就忽略这个事件。event.fromElement指向触发onmouseover和onmouseout事件时鼠标离开的元素；event.toElement指向触发onmouseover和onmouseout事件时鼠标进入的元素。那么上面两行代码的含义就分别是：○ 当触发onmouseover事件时，判断鼠标离开的元素是否是当前元素的内部元素，如果是，忽略此事件；○ 当触发onmouseout事件时，判断鼠标进入的元素是否是当前元素的内部元素，如果是，忽略此事件；这样，内部元素就不会干扰外层元素的onmouseover和onmouseout事件了。但问题又来了，非IE的浏览器并不支持contains函数，不过既然我们已经知道了contains函数的作用，就可以自行添加如下的代码来为非IE浏览器增加contains支持：if(typeof(HTMLElement) != "undefined"){HTMLElement.prototype.contains = function(obj){     while(obj != null && typeof(obj.tagName) != "undefined")     {if(obj == this)return true;obj = obj.parentNode;}   return false;   };   }
    对我有用[0]丢个板砖[0]引用举报管理TOP
    精华推荐：闲来无事,试验页面采用拖放进行传递数据的通用方法
    管理菜单
    结  帖
    发  帖
    回  复

    公司简介|招贤纳士|广告服务|银行汇款帐号|联系方式|版权声明|法律顾问|问题报告
    北京创新乐知信息技术有限公司 版权所有, 京 ICP 证 070598 号
    世纪乐知(北京)网络技术有限公司 提供技术支持
    江苏乐知网络技术有限公司 提供商务支持
     Email:[email protected]
    Copyright © 1999-2011, CSDN.NET, All Rights Reserved