当前位置：首页 → 问答吧 → 求高手解决这个事件冒泡的问题

求高手解决这个事件冒泡的问题

时间：2010-05-06

来源：互联网

当鼠标划过头像的时候会弹出一些信息。
理想的效果是当鼠标离开弹出的信息框的时候。这个框消失掉。
但是现在鼠标里框里面滑动的时候。IE会出现一闪一闪的现象。
火狐是当选择文字的时候会出现冒泡情况。

这个效果跟DZ哪效果一样。求高手解决。是不是我的HTML构造有问题啊。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { padding: 0;margin: 0;} table {border-collapse: collapse;border-spacing: 0;} fieldset,img { border: 0;} address,caption,cite,code,dfn,em,strong,th,var {font-weight:400;font-style:normal;} ol,ul {list-style: none;} caption,th {text-align: left;} h1,h2,h3,h4,h5,h6 {font-weight: normal;font-size: 100%;} q:before,q:after {content:'';} abbr,acronym {border:0;} .avatar{ font-size:12px; margin:20px; padding:10px; border:1px solid #CCC;} .list dd{clear:both; margin-top:10px;} .list dd:after{ content:"\20"; clear:both; display:block;} .head-info{ position:relative; width:80px;} .head-info img{ margin:11px; position:absolute;z-index:3;} .ava-info ul{ padding:10px 0 0 65px;} .ava-info ul li{line-height:18px;} .ava-info{left:0;top:0;position:absolute; width:300px; height:80px; background:#F5F5F5; border:1px solid #CCC; z-index:2; display:none;} .content{height:auto !important; height:100px; min-height:100px; margin-left:80px; padding-top:10px;} </style> </head> <body> <div class="avatar" > <dl class="list" id="avatar"> <dd> <div class="head-info"> <img src="http://mbloghead.store.qq.com/mbloghead/521a716bc4a25eb3845e/50" /> <div class="ava-info"> <ul> <li>鲁军</li> <li>男，未婚</li> <li>为找个女朋友努力奋斗</li> </ul> </div> </div> <div class="content"> 这里可能是放其他一些信息的地方<br/> 这里可能是放其他一些信息的地方<br/>这里可能是放其他一些信息的地方<br/>这里可能是放其他一些信息的地方<br/>这里可能是放其他一些信息的地方<br/>这里可能是放其他一些信息的地方<br/>这里可能是放其他一些信息的地方<br/>这里可能是放其他一些信息的地方<br/>这里可能是放其他一些信息的地方<br/> </div> </dd> <dd> <div class="head-info"> <img src="http://mbloghead.store.qq.com/mbloghead/521a716bc4a25eb3845e/50" /> <div class="ava-info"> <ul> <li>鲁军</li> <li></li> <li>为找个女朋友努力奋斗</li> </ul> </div> </div> <div class="content"> 这里可能是放其他一些信息的地方<br/> 这里可能是放其他一些信息的地方<br/>这里可能是放其他一些信息的地方<br/>这里可能是放其他一些信息的地方<br/>这里可能是放其他一些信息的地方<br/>这里可能是放其他一些信息的地方<br/>这里可能是放其他一些信息的地方<br/>这里可能是放其他一些信息的地方<br/>这里可能是放其他一些信息的地方<br/> </div> </dd> </dl> <script type="text/javascript"> (function(){ var $=function(id){return document.getElementById(id);}, dd=$("avatar").getElementsByTagName("dd"), imgs=[], divs=[], toggle=function(i){ divs[i].style.display=(divs[i].style.display=='block')?'none':'block'; }, i=0; for(i;i<dd.length;i++){ imgs.push(dd[i].getElementsByTagName("IMG")[0]); divs.push(dd[i].getElementsByTagName("div")[1]); imgs[i].onmouseover=(function(i){ return function(){ toggle(i); } })(i); divs[i].onmouseout=(function(i){ return function(){ toggle(i); } })(i); } })() </script> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: idche 发布时间: 2010-05-06

这是因为鼠标动的时候触发了里面的LI原因。下面这个是例子，你按照这个修改一下就行了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
ul {
border:1px solid red; padding:10px;
zoom:1; /* 触发IE layout */
}
ul li{
line-height:30px;border:1px solid blue; margin:10px
}
</style>
<script type="text/javascript">
window.onload = function(){
var h=document.getElementById('hide');
h.onmouseout=function(e) {
  var e = e || window.event, relatedTarget = e.toElement || e.relatedTarget;
  while(relatedTarget && relatedTarget != this)
relatedTarget = relatedTarget.parentNode;
  if(!relatedTarget)
alert("a");
}
}
</script>
</head>
<body>
<ul  id="hide1">
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
</ul>

<div id="hide">想在ul移出才alert 而不是在li之间也alert 应该怎么写呢~~谢谢</div>
</body>

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/faleshi/archive/2010/05/04/5556635.aspx

作者: faleshi 发布时间: 2010-05-06

如果是冒泡的话，可以取消冒泡的！
//阻止事件冒泡的通用函数
function stopBubble(e){
// 如果传入了事件对象，那么就是非ie浏览器
if(e&&e.stopPropagation){
      //因此它支持W3C的stopPropagation()方法
      e.stopPropagation();
}else{
      //否则我们使用ie的方法来取消事件冒泡
      window.event.cancelBubble = true;
}
}

作者: szpoppy 发布时间: 2010-05-06

十分感谢2楼的回复。用你的放假解决了这个问题。
对了能不能解释下
var e = e || window.event, relatedTarget = e.toElement || e.relatedTarget;
                  while(relatedTarget && relatedTarget != this)
                  relatedTarget = relatedTarget.parentNode;
                  if(!relatedTarget){

下面的3句代码什么意思？
relatedTarget = e.toElement || e.relatedTarget;
relatedTarget != this
relatedTarget.parentNode

作者: idche 发布时间: 2010-05-06

求高手解决这个事件冒泡的问题

热门阅读

热门下载