您的位置：首页 > Web前端 > JavaScript

Javascript - 正确使用div的mouseout事件

2009-03-18 19:49 459 查看
在基于javascript的导航菜单中，很多情况下需要对鼠标是否已经离开了某个<div>做出正确的判断，而仅仅对于这个<div>的mouseout事件attach一个handler是无法正确的完成任务的，因为即使你attach了一个<div>的onmouseout事件的handler，由于javascript中著名的event bubbling机制，会导致这个handler同样能够捕获到<div>中其他childNode的mouseout事件。

对于如下的实例：

--------------| Layer      |.onmouseout = doSomething;| --------   || | Link | ----> 我们需要捕获这个层的mouseout事件| --------   || --------   || | Link |   || |    ----> | 而不是这个链接的mouseout事件| --------   |------------------>: 鼠标移动

实际的效果就是你的doSometing这个函数在用户鼠标移出Link的时候同样会被触发，这样的情况下，就需要我们手工的在doSometing函数中将这些我们本来不想捕获的事件过滤掉；实际的代码如下：

Code (javascript)

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

}

对于代码的一些说明：

首先，我们通过event target判断发生事件的目标，如果不是一个<div>的话，立即调出函数，因为除了层之外的mouseout事件我们并不care

在确定了target是一个<div>之后，我们依旧无法确定究竟是鼠标离开了<div>还是鼠标进入了<div>里面的某个链接，所以我们需要通过
relatedTarget(FF)
/
toElement(IE)
两个不同的属性来进行一些判断；我们使用
relatedTarget
/
toElement
进行DOM回朔，中止的条件是这个元素的父节点是<div>本身或者<body>元素。

如果回朔结束后的元素等于<div>本身的话，我们同样也应该选择不处理这个事件，因为它并不是正确的<div> mouseout事件。

当将以上的两种情况都过滤之后，就可以写入真正的事件处理函数；至此就算正确的达到了我们原先的目的。

以上的这种解决方案出自这篇文章。

PS:www.quirksmode.org是一个非常不错的javascript站点
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航