mouseover、mouseout停止事件冒泡的解决方案

停止事件冒泡在各浏览器中已经有相应的解决方案，但是对于mouseover和mouseout却显得力不从心。
在IE里有onmouseleave和onmouseenter, 而对于要兼容各大浏览器的Web开发人员来说还是一件头疼的事。
虽然网上已经有针对Mozilla Firefox的一些计策，但代码量也是不容乐观的。
想寻求比较好的解决方案，于是就翻遍了国内的大小网站，终一无所获，不得不硬着头皮去读国外网站，结果是理想的，因为W3C里有relatedTarget，于是就有了下边的解决方案：

function isMouseLeaveOrEnter(e, handler) {
    if (e.type != 'mouseout' && e.type != 'mouseover') return false;
    var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;
    while (reltg && reltg != handler)
        reltg = reltg.parentNode;
    return (reltg != handler);
}

在onmouseover和onmouseout里做如上判断。

嗯,非常好!!之前用jquery的实现有发现这个问题,但是没有去仔细寻找解决的方法,没想到楼主共享出来了. 很强大.

那些投新手贴的,真的遇到过处理事件冒泡的吗.

jquery:
event.stopPropagation();

JQuery用的是e.stopPropagation();和e.cancelBubble = true;对onmouseover和onmouseout是不能解决问题的，微软造了个onmouseleave和onmouseenter，其它浏览器没有。

请问
“在onmouseover和onmouseout里做如上判断。 ”
这句怎么实践呢

onmouseover(){
//这里先调用？

/*
mouseover代码？
*/
}

另外调用时handle写什么呢？

先在IE中执行如下代码

<div style="border: 1px solid black; width: 350px;" onmouseout="var out = document.getElementById('out'); out.value = parseInt(out.value) + 1;" onmouseover="var over = document.getElementById('over'); over.value = parseInt(over.value) + 1;">
	Try moving the mouse in and out of this div
	<div style="background: #efe; margin: 20px; width: 160px; border: 5px solid black;">and the nested div</div>
</div>
<p>
	mouseovers <input id="over" value="0">
	mouseouts <input id="out" value="0"><br>
</p>

<div style="border: 1px solid black; width: 350px;" onmouseleave="var leave = document.getElementById('leave'); leave.value = parseInt(leave.value) + 1;" onmouseenter="var enter = document.getElementById('enter'); enter.value = parseInt(enter.value) + 1;">
	Try moving the mouse in and out of this div
	<div style="background: #efe; margin: 20px; width: 160px; border: 5px solid black;">and the nested div</div>
</div>
<p>
	mouseenters <input id="enter" value="0">
	mouseleaves <input id="leave" value="0"><br>
</p>

看到效果后理解onmouseover，onmouseout，onmouseenter，onmouseleave，以及为什么要寻求以上解决之道
然后再加入如下script：

function isMouseLeaveOrEnter(e, handler) {  
    if (e.type != 'mouseout' && e.type != 'mouseover') return false;  
    var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;  
    while (reltg && reltg != handler)  
        reltg = reltg.parentNode;  
    return (reltg != handler);  
}

将onmouseenter和onmouseleave部分换成

onmouseout="var leave = document.getElementById('leave'); if (isMouseLeaveOrEnter(event, this)) leave.value = parseInt(leave.value) + 1;" onmouseover="var enter = document.getElementById('enter'); if (isMouseLeaveOrEnter(event, this)) enter.value = parseInt(enter.value) + 1;"

在IE及Firefox里执行

其实此种方法是解决onmouseenter和onmouseleave的，上边的例子会很清晰，
向上的事件冒泡是可以通过e.stopPropagation();和e.cancelBubble = true;来解决的，
另外，在Table中此类问题会更突出，
只有实际遇到类似问题时才能很清楚的理解。