懂JS得进来看看....高分求救.

Question

废话少说.直接代码勒.写的有点罗嗦,希望高手们耐心看下去.
<UL>
<LI class="search1" id="changebox1" onmouseover="javascript:tag(2);this.blur();"> 选择1 </LI>
<LI class="search2" id="changebox2"onmouseover="javascript:tag(3);this.blur();"> 选择2 </LI>
</UL>
<div id="one"></div>
<div id="two"><a href="#">被选择1</a><a href="#">被选择11</a></div><div id="three"><a href="#">被选择2</a><a href="#">被选择22</a></div><script>
function tag(id){
document.getElementById("one").innerHTML= document.getElementById(id).innerHTML;
}
</script>
当鼠标悬停 “选择1” 的时候 div one里面的内容 是“div two ” 当“选择2”的时候. div one里面的内容是 “div three”一切都是好使的 也很正常.但是今天朋友告诉我的改动说是.当鼠标离开后. div one 里面的内容得为空.于是我加了一个 JS方法 function outdiv(){document.getElementById("one").innerHTML="";}在 div one里面加了一个鼠标离开事件  onmouseout="outdiv()"  可是问题出现了当我鼠标悬停  "选择1"  的时候 出现了  被选择1  和 被选择2 两个超链接而当我鼠标悬停到 被选择1 的内个超链接 完全正常而悬停到 被选择2 的内个超链接 就显示已经离开,并且就触发了 outdiv()事件.并且 div one的内容为空...我的不解,我明明是給DIV 加上了一个鼠标离开事件,为什么会在div里面的第二个超链接上就触发了.明明是还在内个div里面.求高手解答 

Answer 1

<a href="javascript:;">被选择11</a></div> 试试

Answer 2

<UL>
<LI class="search1" id="changebox1" onmouseover="javascript:tag(2);this.blur();"> 选择1 </LI>
<LI class="search2" id="changebox2"onmouseover="javascript:tag(3);this.blur();"> 选择2 </LI>
</UL>
这里传给tag方法的是阿拉伯数字2、3，而id是英文单词。改成tag('two')就可以了。

Answer 3

因为你的mouseout是给父级容器中注册的当鼠标在容器中移动到容器内部的任何一个子元素上，都会触发容器的mouseout，并触发子元素的mouseover，且子元素mouseover事件冒泡到父容器上，又会继续触发父容器的mouseover事件。所以在父容器上注册鼠标移出和移入事件，会被多次执行。你甚至会看到闪烁感。规避手段就是用事件缓冲，mouseout的时候别立即删除，而是缓冲200毫秒（200毫秒是举例）

Answer 4

onmouseout，mouseover经过子元素也触发的问题解决方案（兼容） 

Answer 5

奇怪。。楼主说的mouseout事件是绑定到div one上面的。。楼上各位一直和楼主说冒泡的事，有关系么？

Answer 6

我遇见过这问题，你不应该在<UL>
<LI class="search1" id="changebox1" onmouseover="javascript:tag(2);this.blur();"> 选择1 </LI>
<LI class="search2" id="changebox2"onmouseover="javascript:tag(3);this.blur();"> 选择2 </LI>
</UL>加onmouseout,你应该在<UL>外加一个<DIV>,在<DIV>加onmouseout，和onmouseover来判断的，还要注意HTML的层关系，有时候离开和进入LI都会触动onmouseout时间的