美文网首页前端
jQuery mouseover || mouseout事件多次

jQuery mouseover || mouseout事件多次

作者: forward | 来源:发表于2021-04-09 16:59 被阅读0次

    控制鼠标移动事件,在使用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事件多次

        本文链接:https://www.haomeiwen.com/subject/slqwkltx.html