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

停止事件冒泡在各浏览器中已经有相应的解决方案,但是对于mouseover和mouseout却显得力不从心。 
在IE里有onmouseleave和onmouseenter, 而对于要兼容各大浏览器的Web开发人员来说还是一件头疼的事。 
虽然网上已经有针对Mozilla Firefox的一些计策,但代码量也是不容乐观的。 
想寻求比较好的解决方案,于是就翻遍了国内的大小网站,终一无所获,不得不硬着头皮去读国外网站,结果是理想的,因为W3C里有relatedTarget,于是就有了下边的解决方案: 
Javascript代码 
  1. function isMouseLeaveOrEnter(e, handler) {  
  2.     if (e.type != 'mouseout' && e.type != 'mouseover'return false;  
  3.     var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;  
  4.     while (reltg && reltg != handler)  
  5.         reltg = reltg.parentNode;  
  6.     return (reltg != handler);  
  7. }  

在onmouseover和onmouseout里做如上判断。

例子:

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

posted @ 2010-09-16 12:40  rexkobe  阅读(755)  评论(0编辑  收藏  举报