js笔记:如何解决mouseover与mouseout的多次触发问题
来源:互联网 发布:电信网络宽带路由器 编辑:程序博客网 时间:2024/05/17 09:06
如何解决mouseover与mouseout的多次触发问题
首先我们要了解的是为什么mouseover与mouseout会出现多次触发的问题?这就要看它们作用的对象如何。
1.假如其作用的对象没有子代:比如<div id=’yao’ onmouseover=’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的多次触发问题
- JS中mouseover和mouseout多次触发问题如何解决
- JS中mouseover和mouseout多次触发问题如何解决
- js当中mouseover和mouseout多次触发(非冒泡)
- mouseover和mouseout多次触发解决方法(兼容ie和firefox)
- mouseover和mouseout多次触发解决方法(兼容ie和firefox)
- JavaScript中mouseover和mouseout多次触发解决办法
- JavaScript中mouseover和mouseout多次触发解决办法
- 解决因mouseover,mouseout冒泡产生的闪烁问题+兼容性问题
- jQuery的mouseover和mouseout事件当快速移动 事件延迟触发问题
- mouseover与mouseout的差异与联系
- mouseover多次触发事件
- 快速移动鼠标导致js 的mouseover,mouseout,mouseenter,mouseleave等事件(触发动画)反复叠加的处理
- mouseover和mouseout多次出发解决方案。
- js mouseover/mouseout不停地循环
- 消除mouseover或mouseout重复触发事件
- jQuery hover 与 mouseover 与mouseout 的区别
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
- 【php中的curl】php中curl的详细解说
- POJ
- Mysql和Oracle Mybatis批量操作
- 基于装饰器的用户管理登录
- Android开发中常用工具类源码积累
- js笔记:如何解决mouseover与mouseout的多次触发问题
- Alice, Bob and Chocolate CodeForces
- 你很危险,加油!!!
- Mac安装MySQL初始密码设置
- 二次剩余
- 【九度OJ】1203:IP地址
- Android 日志打印
- NYOJ 2356: 哈希计划【模拟】
- 1008. 数组元素循环右移问题 (20)