JavaScript Event学习第九章：鼠标事件

核心提示： 那么我们如何在鼠标真正离开的层的时候让mouseout发生呢？1functiondoSomething(e){<br>if(!e)vare=window.event;<br>vartg=(window.event)?e.srcElement:e.target;<br

那么我们如何在鼠标真正离开的层的时候让mouseout发生呢？

1　function　doSomething(e)　{<br>　　　　if　(!e)　var　e　=　window.event;<br>　　　　var　tg　=　(window.event)　?　e.srcElement　:　e.target;<br>　　　　if　(tg.nodeName　!=　'DIV')　return;<br>　　　　var　reltg　=　(e.relatedTarget)　?　e.relatedTarget　:　e.toElement;<br>　　　　while　(reltg　!=　tg　&&　reltg.nodeName　!=　'BODY')<br>　　　　　　　　reltg=　reltg.parentNode<br>　　　　if　(reltg==　tg)　return;<br>　　　　//　Mouseout　took　place　when　mouse　actually　left　layer<br>　　　　//　Handle　event<br>}<br>

首先得到事件的target，也就是鼠标离开的元素。如果target不是DIV（层），理解结束函数，因为鼠标没有真正离开层。

如果target是层，我们不能确定鼠标时离开层了还是进入了层里面的一个链接。所以要再检查事件的relatedTarget/toElement，也就是鼠标移向的那个元素。

我们读取这个元素，然后我们通过DOM树向上遍历，直到事件的target（也就是DIV），或者BODY元素。

如果我们遇到的target是层的子元素，那么鼠标就没有离开层。就停止函数的运行。

当函数通过所有的验证我们就能确定鼠标确实离开了层，我们就能开始应该的动作了（通常是隐藏这个层）。

Mouseenter和mouseleave

微软还有个解决办法。他添加了两个新的事件mouseenter和mouseleave。除了对事件冒泡不反应以外基本上和mouseover和mouseout是一样的。他们把注册了事件的元素看成一个整块，对于发生在块内的

mouseover和mouseout不做反应。

所以这两个事件也解决了我们的问题：他们只对绑定的元素做出mouseover/out反应。

现在这两个事件只被版本在5.5以上的IE支持。或许其他浏览器哪天回借鉴下。

结尾

现在已经到了Event的介绍的尾声了。好运！

原文地址：http://www.quirksmode.org/js/events_mouse.html

文章出处：http://beiyu.cnblogs.com

编缉推荐阅读以下文章

• JavaScript Event学习补遗：addEventSimple
• JavaScript Event学习第十一章：按键的检测
• JavaScript Event学习第十章：一些可替换的事件对
• JavaScript Event学习第八章：事件的顺序
• JavaScript Event学习第七章：事件属性
• JavaScript Event学习第六章：事件的访问
• JavaScript Event学习第五章：高级事件注册模型
• JavaScript Event学习第四章：传统的事件注册模型
• JavaScript Event学习第三章：早期的事件处理程序
• JavaScript Event学习第二章：Event