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(){   }); 

....

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容