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

Posted by admin

10月 25, 2010

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

JavaScript语言:

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里做如上判断。

使用方法如下：

JavaScript语言:

<divstyle=“border: 1px solid black; width: 350px;”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;”>
Trymovingthemouseinandoutofthisdiv
<divstyle=“background: #efe; margin: 20px; width: 160px; border: 5px solid black;”>andthenesteddiv</div> 
</div> 
<p>
mouseenters<inputid=“enter”value=“0″>
mouseleaves<inputid=“leave”value=“0″><br>
</p>
<script type=“text/javascript”>

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);

}

</script>