javascript完美解决onMouseOver、onMouseOut冒泡事件方法简单

javascript完美解决onMouseEnter、onMouseLeave、onMouseOver、onMouseOut冒泡事件的一种思路,兼容各种浏览器.

js冒泡事件的产生: 当鼠标移动到div区域内的table、img、a等元素时触法div本身的onmouseout事件. 由于鼠标停留在div标签内部元素上,触发div的onmouseout事件肯定不是我们想要的结果,于是便产生了冒泡事件.

js冒泡事件的解决方法: 当然网上解决的方法有很多,大多代码伸长,不容易理解. 而我们讲的代码非常简短,确容易理解.

原理就是:当触发div的onmouseout事件时,判断触法事件的元素是不是div的子元素,如果是则中断执行即可.

核心代码用到一个contains方法。如果A元素包含B元素，则返回true，否则false。

IE: event.toElement ; // 这个方法用来返回IE下触法事件的元素

非IE: event.relatedTarget; // 这个方法用来返回非IE下触法事件的元素

代码如下:

<div onmouseout="hiddenObj(event,this);"> <a href=#>冒泡事件超链接</a> </div>

<script type="text/javascript" >

function hiddenObj(theEvent,obj){ //theEvent用来传入事件，Firefox的方式

var browser=navigator.userAgent; //取得浏览器属性

if (browser.indexOf("MSIE")>0){ //如果是IE

if (obj.contains(event.toElement)) return; // 如果是子元素则结束函数

}else{ //如果是Firefox

　　 if (obj.contains(theEvent.relatedTarget)) return; // 如果是子元素则结束函数

}

/*要执行的操作*/

obj.style.display='none';

}

</script>