javscript 冒泡事件处理方法 支持（IE,firefox）

用javascript做弹出菜单效果时候遇到冒泡事件问题，导致onmouseout事件多次触发；在网上查了些资料，终于解决这个问题。下面的是处理冒泡事件的一个demo

 

1.html：

<div id="idFade" style="border-style:groove"><a href="#" id="a_node"  >A content</a><div id="div_node" style="border-style:outset">Div content</div></div>

 

2.javascript：

<mce:script language="javascript"><!-- function Event(e) { var isIE = (document.all) ? true : false; var oEvent = isIE ? window.event : e; if (isIE) { oEvent.pageX = oEvent.clientX + document.documentElement.scrollLeft; oEvent.pageY = oEvent.clientY + document.documentElement.scrollTop; oEvent.stopPropagation = function(){ this.cancelBubble = true; }; } return oEvent; } if(typeof(HTMLElement)!="undefined") //firefox定义contains()方法，ie下不起作用 { HTMLElement.prototype.contains=function (obj) { while(obj!=null&&typeof(obj.tagName)!="undefind"){ if(obj==this) return true; obj=obj.parentNode; } return false; } } document.getElementById('idFade').onmouseout = function(e) { e = Event(e); if (e){ var browser=navigator.userAgent; if (browser.indexOf("Firefox")>0){ //Firefox if (document.getElementById('idFade').contains(e.relatedTarget)) {return;}//若光标在容器里，则停止 } if (browser.indexOf("MSIE")>0){//IE if (document.getElementById('idFade').contains(e.toElement)) {return; }//若光标在容器里，则停止 } } alert('test'); } // --></mce:script>