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

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

1.假如其作用的对象没有子代：比如<div id=’yao’ οnmοuseοver=’fn()’></div>这是一个没有子节点(当然指的是元素节点)，那么多次触发的现象是不会出现的。

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,即返回truereturn 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.其本身不是标准的事件触发对象targetreturn !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,即返回truereturn 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.其本身不是标准的事件触发对象targetreturn !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);}
}

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

mouseover和mouseout事件在鼠标经过子元素时也会触发
javascript的mouseover和mouseout事件,在绑定元素内部有子元素的情况下, 经过绑定元素时会多次触发mouseover和mouseout事件. jquery解决办法: jquer ...
js当中mouseover和mouseout多次触发(非冒泡)
JS当中,mouseover和mouseout多次触发事件,不光是冒泡会产生,就是不冒泡,在一定条件下 ,也会产生多次触发事件: 例如下面的结构的情况下,我在class="ceng_up f ...
JavaScript中mouseover和mouseout多次触发解决办法
问题描述我希望当鼠标移动到id1上的时候,id2显示,当鼠标离开id1的时候,id2不显示.问题如下: 1.当鼠标从id1上移动到id2上的时候,id由有显示变为不显示,然后变为显示 2.当鼠标从i ...
html语言中mouse over,javascript中mouseover、mouseout使用详解_javascript技巧-js教程
本文并没有像标题说的那样,真正阻止事件元素的子元素冒泡... 只是在子元素冒泡到事件元素处时进行了一个判断,判断是否要触发事件,哦...不对应该是是否要运行事件函数中的相关操作... 首先你可以猛戳 ...
mouseover、mouseout事件悬浮图片闪烁解决办法
项目需求,鼠标悬浮在div上时出现弹框信息,on关联mouseover事件时,出现悬浮框一直不停闪烁,是因为频繁触发了mouseover和mouseout事件,解决办法: 在悬浮框元素中加入css样式 ...
mouseover和mouseout多次触发解决方法(兼容ie和firefox)（转）
在用到mouseover和mouseout事件来作为事件触发的条件,但是如果我们用做触发的元素内部有其他的元素的时候当鼠标移上的时候会反复的触发mouseover和mouseout事件,如导致菜单闪烁 ...
js 鼠标事件总结 mouseover/mouseout 与mouseenter/mouseleave 傻傻分不清楚?
1. 鼠标事件 mouseenter mouseleave (一对事件鼠标的进入和离开) 不支持冒泡 mouseenter:鼠标从元素外部移到元素内部时触发. mouseleave:鼠标从元素内部移 ...
javascript中mouseover和mouseout事件详解
原文链接:http://blog.sina.com.cn/s/blog_468530a60101awlw.html 与 mouseenter 事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发 ...
jQuery中hover与mouseover和mouseout的区别分析
本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于h ...

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

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

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

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

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

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

最新文章

热门文章