function doSomething(e) {
if (!e) var e = window.event;
var relTarg = e.relatedTarget || e.fromElement;
}
如果在mouseout的情况下想知道鼠标的去向那么：
复制代码 代码如下:
function doSomething(e) {
if (!e) var e = window.event;
var relTarg = e.relatedTarget || e.toElement;
}
鼠标离开一个层
在一个基于层的导航菜单里面你可能需要知道鼠标什么时候离开层这样你才能把那个层关闭。所以你给这个层的onmouseout注册了一个事件处理程序。然后事件冒泡会导致当鼠标离开任意一个层的时候都会触发这个onmouseout。
--------------
| Layer |.onmouseout = doSomething;
| -------- |
| | Link | ----> We want to know about this mouseout
| -------- |
| -------- |
| | Link | |
| | ----> | but not about this one
| -------- |
--------------
---->: mouse movement
另外的一个停止的方法是当你把鼠标移入这个层，然后到了一个链接上，浏览器就在这个层上注册一个mouseout事件。这个让我很不明白（鼠标依然在层里），但是所有的浏览器都没问题。
那么我们如何在鼠标真正离开的层的时候让mouseout发生呢？
复制代码 代码如下:
function doSomething(e) {
if (!e) var e = window.event;
var tg = (window.event) ? e.srcElement : e.target;
if (tg.nodeName != 'DIV') return;
var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
while (reltg != tg && reltg.nodeName != 'BODY')
reltg= reltg.parentNode
if (reltg== tg) return;
// Mouseout took place when mouse actually left layer
// Handle event
}
首先得到事件的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的介绍的尾声了。好运！
原文地址：
我的Twitter:@rehawk
您可能感兴趣的文章: