jQuery mouseover,mouseout事件多次执行的问题处理
控制鼠标移上移下事件,在使用Jquery 的mouseover
,mouseout
事件时,元素内部含有其它元素,会造成该事件多次的触发的情况。
问题解析
在用到mouseover
和mouseout
事件来作为事件触发的条件,单一元素可以正常使用,但是如果我们用做触发的元素内部有其他的元素的时候当鼠标移上的时候会反复 的触发mouseover
和mouseout
事件。因为内部元素在鼠标移上的时候会向它的父对象派发事件,所以外面元素相当于也触发了mouseover
事件。
解决方法
jquery(需要版本号大于1.2.2)中修复上述问题。
将mouseover,mouseout 替换 mouseenter和mouseleave事件,这是IE特有的函数,使用jquery就很好的解决了兼容问题。函数的原理当第一次鼠标进入节点区域时触发,以后在节点区域内(子节点间)移动时不触发。
绑定示例:
$('div').bind("mouseenter",function(){ // code }); $('div').bind("mouseleave",function(){ // code});