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>