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了，