Firefox中(mouseover,mouseout)事件捕捉问题

在实现一个功能的遇到一个事件捕获的问题, 具体场景如下:

ID 为 hello 的一个 div 中有一个 table

<style type='text/css'>
#hello{width:800px;height:200px;background-color:red;margin-top:10px;margin-left:10px;padding:10px;}
#hello table{background-color:green;}
</style>
 

<div id="xxx">
    <div id='hello'>
        <table width="100%" height="100%">
            <tr><td></td></tr>
        </table>
    </div>
</div>

这个时候,我希望,当鼠标进入 hello的时候触发mouseover事件,而出来的时候触发mouseout事件,而对于table则就无所谓了。

但是如下的代码,当鼠标快速移动的移入,移出的时候并不会实现预想的功能, 因为即使是子元素的mouseover/mouseout 事件也会冒泡,进而执行里面的代码。

$("#hello").mouseover(function(e) {
    e.stopPropagation();  console.log("i'm in  the div");
});


$("#hello").mouseout(function(e) {
    e.stopPropagation(); console.log("i'm out the div");
});

参考了https://developer.mozilla.org/en/DOM/event.relatedTarget 的例子,想到了一个解决方案

$("#hello").mouseover(function(e) {
    e.stopPropagation();
    var rel = e.target;
    while(rel) {
        //console.log("here rel is[" + rel.id +"] tagName is [" + rel.tagName + "]");
        if(rel == this) break;
        rel = rel.parentNode;
    }
    if(rel == this) {
        console.log("in the div, target is[" + e.target.tagName + "]");
    }

});


$("#hello").mouseout(function(e) {
    e.stopPropagation();
    var rel = e.relatedTarget;
    while(rel) {
        //console.log("here rel is[" + rel.id +"] tagName is [" + rel.tagName + "]");
        //console.log(this);
        if(rel == this || rel.tagName == "BODY") break;
        rel = rel.parentNode;
    }
    if(rel != this) {
        console.log("out of the div");
    }
});

当Mouseover的时候,e.target 理论上应该是 div#hello 或者它的子元素,这样当这个事件发生的时候,使用冒泡的方式查看e.target是否是div#hello的子元素,如果是则表明,当前进入了 div#hello,

当mouseout的死后,e.relatedTarget应该不是div#hello或者其子元素,采用同样的方式判断是否除了这个div.

 

特别说明下 e.target, e.relatedTarget,e.currentTarget 表示的元素:

e.target: 表明当前事件发生的元素

e.relatedTarget: mouseover时,表明指针移出的元素, mouseover时,表明指针移入的元素

e.currentTarget: 就是你添加 listener的时候的元素,在这儿就是 div#hello了,

This article is posted by on , link is .

Leave a reply