Javascript - 正确使用div的mouseout事件

最新推荐文章于 2023-10-13 20:21:46 发布

小晖Allen

最新推荐文章于 2023-10-13 20:21:46 发布

阅读量5.8k

点赞数

在基于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站点