js笔记：如何解决mouseover与mouseout的多次触发问题

如何解决mouseover与mouseout的多次触发问题

首先我们要了解的是为什么mouseover与mouseout会出现多次触发的问题？这就要看它们作用的对象如何。

1.假如其作用的对象没有子代：比如

这是一个没有子节点(当然指的是元素节点)，那么多次触发的现象是不会出现的。

2.假如其有子代，不仅它本身会触发事件，同样的其子代也会触发事件，这就是多次触发的原因。

 

解决方法，我们可以想到的是：通过判断此次触发是由作用对象本身触发的还是由其子代触发的，从而执行不同的行为。

 

这里准备两个methods——checkHover(e,target)和contains(node,targetNode)

checkHover用于区分对象本身与其子代的事件触发，contains用于判断节点targetNode是否包含于节点node。通俗来讲，我们通过contains方法来判断事件e的触发对象是否包含于target(也就是我们的目标对象，原本合理的事件触发对象)，由此来判断该触发是否合理，也就是说该触发是否是标准意义上或者说我们所想要得到的触发。

 

那么首先我们实现contains方法：

//判断目标节点是否存在于指定节点(这里我们特意做了兼容ie6以上可用包括ie6)
function contains=document.defaultView?	//判断是否为标准主流浏览器
	function(node,targetNode){
		if(!targetNode)return false;
		return !!(node.compareDocumentPosition(targetNode)&16);
	}:
	(document.contains&&!(sys.safari&&sys.safari<3))?	//判断是否兼容contains方法
	function(node,targetNode){
		if(!targetNode)return false;
		return node!=targetNode&&node.contains(targetNode);
	}:
	function(node,targetNode){	//最笨的方法，也是一定有用的
		var flag;
		//更低的版本浏览器
		if(node===targetNode||!targetNode){
			return false;
		}
		// var nodes=node.childNodes;
		// for(var i in nodes){
			// if(nodes[i]===targetNode){
				// return true;
			// }
			// else{
				// flag=this.contains(nodes[i],targetNode);
				// if(flag==true){
					// return true;
				// }
			// }
		// }
		// return false;
		var area=targetNode.parentNode;//遍历父节点
		do{
			if(area===node){//假如遍历到一个父节点为node则targetNode包含于node,即返回true
				return true;
			}
			else{
				area=area.parentNode;
			}
		}while(area!=null);
		return false;//假如遍历不到一个父节点为node则targetNode包含于node,即返回false
	};

注：上面的每一个if条件，我们都有判断targetNode是否为null或者undefined,这是因为targetNode获取的值并非dom值,而是页面以外的区域，targetNode则为null,这个我们在checkHover中更好理解。

 

接着实现checkHover方法：

这里首先要了解一个东西，即relatedTarget(ie不支持)、fromElement、toElement。

 

relatedTarget 事件属性返回与事件的目标节点相关的节点。

对于 mouseover事件来说，该属性是鼠标指针移到目标节点上时所离开的那个节点。

对于 mouseout事件来说，该属性是离开目标时，鼠标指针进入的节点。

对于其他类型的事件来说，这个属性没有用。

 

IE事件属性

fromElement: 对于 mouseover 和mouseout事件，fromElement引用移出鼠标的元素。

toElement: 对于mouseover和mouseout事件，该属性引用移入鼠标的元素。

//判断hover事件是否符合逻辑
function checkHover=function(e,target){
	// var e=getEvent(e);
	// alert(e);
	// alert(e.fromElement);
	if(e.type=='mouseover'){
//标准的mouseover触发要满足两个条件：1.鼠标指针移到目标节点上时所离开的那个节点不包含于标准的事件触发对象即target；2.其本身不是标准的事件触发对象target
		return !contains(target,e.relatedTarget||e.fromElement)&&!((e.relatedTarget||e.fromElement)===target);
	}
	else if(e.type=='mouseout'){
//标准的mouseout触发要满足两个条件：1.离开目标时，鼠标指针进入的节点不包含于标准的事件触发对象即target；2.其本身不是标准的事件触发对象target
// alert(e.toElement.parentNode);
		return !contains(target,e.relatedTarget||e.toElement)&&!((e.relatedTarget||e.toElement)===target);
	}
}

注：以e.relatedTarget为例，当我们的鼠标移出页面区域且触发事件e,e.relatedTarget为null,因为非dom，故在contains方法中，我们需要判断targetNode是否为空，很明显此种情况下的触发是合理的，并非子代触发的多余触发。

方法如下：

//获取事件对象
function getEvent(e){
	return e||window.event;
}


//判断目标节点是否存在于指定节点(这里我们特意做了兼容ie6以上可用包括ie6)
function contains=document.defaultView?	//判断是否为标准主流浏览器
	function(node,targetNode){
		if(!targetNode)return false;
		return !!(node.compareDocumentPosition(targetNode)&16);
	}:
	(document.contains&&!(sys.safari&&sys.safari<3))?	//判断是否兼容contains方法
	function(node,targetNode){
		if(!targetNode)return false;
		return node!=targetNode&&node.contains(targetNode);
	}:
	function(node,targetNode){	//最笨的方法，也是一定有用的
		var flag;
		//更低的版本浏览器
		if(node===targetNode||!targetNode){
			return false;
		}
		// var nodes=node.childNodes;
		// for(var i in nodes){
			// if(nodes[i]===targetNode){
				// return true;
			// }
			// else{
				// flag=this.contains(nodes[i],targetNode);
				// if(flag==true){
					// return true;
				// }
			// }
		// }
		// return false;
		var area=targetNode.parentNode;//遍历父节点
		do{
			if(area===node){//假如遍历到一个父节点为node则targetNode包含于node,即返回true
				return true;
			}
			else{
				area=area.parentNode;
			}
		}while(area!=null);
		return false;//假如遍历不到一个父节点为node则targetNode包含于node,即返回false
	};


//判断hover事件是否符合逻辑
function checkHover=function(e,target){
	// var e=getEvent(e);
	// alert(e);
	// alert(e.fromElement);
	if(e.type=='mouseover'){
//标准的mouseover触发要满足两个条件：1.鼠标指针移到目标节点上时所离开的那个节点不包含于标准的事件触发对象即target；2.其本身不是标准的事件触发对象target
		return !contains(target,e.relatedTarget||e.fromElement)&&!((e.relatedTarget||e.fromElement)===target);
	}
	else if(e.type=='mouseout'){
//标准的mouseout触发要满足两个条件：1.离开目标时，鼠标指针进入的节点不包含于标准的事件触发对象即target；2.其本身不是标准的事件触发对象target
// alert(e.toElement.parentNode);
		return !contains(target,e.relatedTarget||e.toElement)&&!((e.relatedTarget||e.toElement)===target);
	}
}