常见的JAVASCRIPT onmouseout事件问题 -

towaywu

浏览: 15033 次
性别:
来自: 长沙

最近访客更多访客>>

wd1282988143

心若水寒

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

常见的JAVASCRIPT onmouseout事件问题

JavaScript IE 浏览器 XHTML HTML

问题:

我们在使用onmouseout事件的时候,经常会出现诡异现象,达不到自己预期的效果!

比如以下示例:

图01

图02

当鼠标点击"列表"域时如图01，显示所有列表如图02，鼠标离开所有列表域时,又返回图01效果.如果按照平常我们直接插入节点,删除节点的思维的话,不同浏览器将会出现不同的效果,达不到预期的效果!在火狐浏览器中,鼠标移到该节点的子节点中时,也会调用mouseout事件,这就是我们不想遇到的!IE中时通过的!

那有上面解决办法呢?在事件中,有这么一个属性relatedTarget,ie中对应的是toElement(鼠标所在当前节点,指向到下一个鼠标所在节点:这样理解可能有点抽象!直接看下面的代码!)

以下代码我们是在FIRFOX中测试通过的 ,IE中就用toElement试试看

提示:"其中很多问题都是自己可以去理解和解决的,在javascript中我们可以把EVENT该对象打印出来所有的属性,看看里面的属性值,然后理解该属性的作用!会对你有很大帮助的!"


<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>onmouseout问题解决</title>
<style>
*{margin:0;padding:0;}
.tdiv{background:#C90;width:200px;}
.slist{width:200px;height:200px;background:#0C0;}
.show{display:block;}
.hidden{display:none;}
</style>
</head>

<body>

<divclass="tdiv"onclick="tover(event)">列表</div>

</body>
<scripttype="text/javascript">

<!--

functiontover(e){
vardiv=document.getElementsByTagName("div")[0];
varreval="";
reval+="<divclass=\"slist\"onmouseout=\"tout(this,event)\">";
reval+="<ul>";
reval+="<li>列表01</li>";
reval+="<li>列表02</li>";
reval+="</ul>";
reval+="</div>";

div.parentNode.innerHTML+=reval;
//alert(e.cancelable);
e.preventDefault();
e.stopPropagation();

}

functiontout(obj,e){
 if(e.relatedTarget===e.currentTarget.parentNode){
obj.parentNode.removeChild(obj);
 }
}


-->

</script>
</html>