jQuery mouseover || mouseout事件多次执行的问题处理

控制鼠标移动事件,在使用Jq 中 mouseover,mouseout事件里,元素内部含有其它元素,会造成该事件多次的触发的情况。

使用mouseover和mouseout事件时,单一元素可以正常使用,但是如果用做触发的元素内部有其他的元素的时候当鼠标移上的时候会反复 的触发mouseover和mouseout事件。因为内部元素在鼠标移入的时候会对他的父级元素委派事件,所以外边儿的元素也触发了mouseover。 然后从这种角度去想这其实也不是问题 一个特性罢了。

解决方法:
引入大于 1.2.2 版本的 jq
把mouseover,mouseout事件替换为mouseenter和mouseleave事件(当第一次鼠标进入节点区域时触发,以后在节点区域内(子节点间)移动时不触发)

方法示例:

$("body").on("mouseenter mouseleave","div",function(event){
    if(event.type == "mouseenter"){
        console.log("移入") 
    }else if(event.type == "mouseleave"){
        console.log("移出")
    }
})
$('div').bind("mouseenter",function(){   }); 
$('div').bind("mouseleave",function(){   }); 

....

你可能感兴趣的:(jQuery mouseover || mouseout事件多次执行的问题处理)