mouseover和mouseout多次触发解决方法(兼容ie和firefox)（转）

在用到mouseover和mouseout事件来作为事件触发的条件，但是如果我们用做触发的元素内部有其他的元素的时候当鼠标移上的时候会反复的触发mouseover和mouseout事件，如导致菜单闪烁等问题。因为内部元素在鼠标移上的时候会向它的父对象派发事件，所以外面元素相当于也触发了mouseover 事件。

为了阻止mouseover和mouseout的反复触发，这里要用到event对象的一个属性relatedTarget，这个属性就是用来判断 mouseover和mouseout事件目标节点的相关节点的属性。简单的来说就是当触发mouseover事件时，relatedTarget属性代表的就是鼠标刚刚离开的那个节点，当触发mouseout事件时它代表的是鼠标移向的那个对象。由于MSIE不支持这个属性，不过它有代替的属性，分别是 fromElement和toElement。

有了这个属性，我们就能够清楚的知道我们的鼠标是从哪个对象移过来，又是要移动到哪里去了。这样我们就能够通过判断这个相关联的对象是否在我们要触发事件的对象的内部，或者是不是就是这个对象本身。通过这个判断我们就能够合理的选择是否真的要触发事件。

这里我们还用到了一个用于检查一个对象是否包含在另外一个对象中的方法，contains方法。MSIE和FireFox分别提供了检查的方法，这里封装了一个函数。

function contains(parentNode, childNode) {if (parentNode.contains) {return parentNode != childNode && parentNode.contains(childNode);} else {return !!(parentNode.compareDocumentPosition(childNode) & 16);}
}

这个函数用于检查一个对象是否被包含在我们的触发对象里面。

下面就是我们的重点了，我封装了一个用于检查鼠标是否真正从外部移入或者移出对象的函数checkHover(e,target)，这个函数需要传入当前的事件对象和目标对象。

function checkHover(e,target){if (getEvent(e).type=="mouseover") {return !contains(target,getEvent(e).relatedTarget||getEvent(e).fromElement) 　　　　　　　　　　&& !((getEvent(e).relatedTarget||getEvent(e).fromElement)===target);} else {return !contains(target,getEvent(e).relatedTarget||getEvent(e).toElement)　　　　　　　　 　　&& !((getEvent(e).relatedTarget||getEvent(e).toElement)===target);}
}function getEvent(e){return e||window.event;
}

函数里面用到的getEvent()函数用于在MSIE或者FF下返回一个可用的event对象，这里你可以自己封装成别的函数。

函数的逻辑很简单，首先判断事件的类型，这个主要是为了迁就MSIE，当是mouseover的时候relatedTarget在MSIE下应该是 fromElement，而mouseout则应该返回toElement，当然在FF下面就好办了，都是同一个属性relatedTarget。首先判断我们的relatedTarget是否在目标对象的内部，如果是的话则直接返回假如果不在内部的话则判断是否是目标对象本身，如果是的话返回假，要是两种情况都不成立则返回真。

到这里我们的主要工作做完了，有了这个函数我们在进行编程的时候只要在mouseover或者mouseout事件内部先检查一下，再进行下一步操作就能轻松实现hover的效果。

myElement.οnmοuseοver=function(e){if(checkHover(e,this)){//do someting...
    }
}
myElement.onmouseout=function(e){if(checkHover(e,this)){//do someting...
    }
}

转载自： http://www.cnblogs.com/shaojun/archive/2011/03/16/1986249.html

转载于:https://www.cnblogs.com/JoannaQ/p/3887912.html

mouseover和mouseout多次触发解决方法(兼容ie和firefox)（转）相关推荐

JavaScript中mouseover和mouseout多次触发解决办法
问题描述我希望当鼠标移动到id1上的时候,id2显示,当鼠标离开id1的时候,id2不显示.问题如下: 1.当鼠标从id1上移动到id2上的时候,id由有显示变为不显示,然后变为显示 2.当鼠标从i ...
js当中mouseover和mouseout多次触发(非冒泡)
JS当中,mouseover和mouseout多次触发事件,不光是冒泡会产生,就是不冒泡,在一定条件下 ,也会产生多次触发事件: 例如下面的结构的情况下,我在class="ceng_up f ...
div失去焦点事件onblur()不触发解决方法
需求: 做一个弹出框组件,文字点击时会在文字下方弹出一个框,在vue3中监听div元素的blur事件发现事件并不会在div失去焦点时触发解决方法 bug原因:在vue中div默认不触发事件,除非将元 ...
flash透明\flash置底无效\flash遮挡div的解决方法兼容Firefox ,IE，chrome浏览器
flash透明无效 \ flash置底无效 \ flash遮挡div 的解决方法兼容Firefox ,IE,chrome浏览器 flash透明 flash置底 lash遮挡div 基本思路为: ...
BMap.Polygon对象触发事件mouseover、mouseout有时不触发
1.问题描述: 鼠标进入省份时经常无法触发事件,区域不能变量.有时鼠标在区域内移动,又会触发事件,区域变量或变浅 2.问题原因: 百度地图mouseover.mouseout事件监听BUG(接口/AP ...
动态添加新元素事件无法触发解决方法
问题:想从后端把数据传给前端,然后ajax动态创建新元素,此时新创建元素的事件无法触发解决办法:事件委托(jquery的on方法) 1.刚开始事件的常规写法写法 $(".del" ...
微信小程序特殊布局下，页面上拉触底事件onReachBottom无法触发解决方法
一.js import fn from '../../utils/functions.js'; // 你自己封装的方法集 Page({data: {list: [],page: 1,loading: ...
mouseover和mouseout事件在鼠标经过子元素时也会触发
javascript的mouseover和mouseout事件,在绑定元素内部有子元素的情况下, 经过绑定元素时会多次触发mouseover和mouseout事件. jquery解决办法: jquer ...
ntko web firefox跨浏览器插件_Firefox火狐浏览器插件全部失效解决方法
5月5日,由于Mozilla公司忘记更新用于签署Firefox插件的安全证书,当证书过期,导致新的插件下载安装失败,并阻止现有的插件正常工作. PC版解决方法 1.启动Studies(Firefox选 ...

mouseover和mouseout多次触发解决方法(兼容ie和firefox)（转）

mouseover和mouseout多次触发解决方法(兼容ie和firefox)（转）相关推荐

最新文章

热门文章