在Javascript中,父元素包含子元素,当给父元素设置onmouseover或onmouseout事件时,鼠标从父级移入子级的时候会多次触发onmouseover事件;鼠标从子级移入父级后再次移出的时候也会多次触发onmouseout事件。这是个很大的问题。
鼠标移入事件加入判断
window.onload=function(){
var oDiv=document.getElementsByTagName('div')[0];
oDiv.onmouseover=function(ev){
var oEvent=ev||event;
var oFrom=oEvent.fromElement||oEvent.relatedTarget;
//其中oEvent.fromElement兼容IE,chrome
//oEvent.relatedTarget;兼容FF。
if(this.contains(oFrom)) return; //判断div是不是包含oFrom,如果包含就返回
do Something...
};
};
同样的鼠标移出事件onmouseout时
window.onload=function(){
var oDiv=document.getElementsByTagName('div')[0];
oDiv.onmouseout=function(ev){
var oEvent=ev||event;
var oTo=oEvent.toElement||oEvent.relatedTarget;
//其中oEvent.toElement兼容IE,chrome
//oEvent.relatedTarget;兼容FF。
if(this.contains(oTo)) return; //判断div是不是包含oTo,如果包含就返回
alert('移出了');
};
};