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 οnmοuseοut="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>