分享

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

 ls02 2011-09-29
停止事件冒泡在各浏览器中已经有相应的解决方案,但是对于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里做如上判断。

先在IE中执行如下代码
Html代码  收藏代码
  1. <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;">  
  2.     Try moving the mouse in and out of this div  
  3.     <div style="background: #efe; margin: 20px; width: 160px; border: 5px solid black;">and the nested div</div>  
  4. </div>  
  5. <p>  
  6.     mouseovers <input id="over" value="0">  
  7.     mouseouts <input id="out" value="0"><br>  
  8. </p>  
  9.   
  10. <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;">  
  11.     Try moving the mouse in and out of this div  
  12.     <div style="background: #efe; margin: 20px; width: 160px; border: 5px solid black;">and the nested div</div>  
  13. </div>  
  14. <p>  
  15.     mouseenters <input id="enter" value="0">  
  16.     mouseleaves <input id="leave" value="0"><br>  
  17. </p>  


看到效果后理解onmouseover,onmouseout,onmouseenter,onmouseleave,以及为什么要寻求以上解决之道
然后再加入如下script:
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. }  

将onmouseenter和onmouseleave部分换成
Html代码  收藏代码
  1. 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里执行

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约