Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
660 views
in Technique[技术] by (71.8m points)

【js】mouseleave事件在鼠标快速移动的情况下导致执行异常,寻找解决思路?

需求描述:如题,当鼠标mouseover指定容器时,程序append一个div到body中,当鼠标mouseleave的时候,程序把这个div删除。

异常情况:当我们快速移动鼠标时,mouseleave事件会执行异常,新建的元素没有删除,始终出现在屏幕上,比较困惑的是,这个没有被删除的元素,是mouseleave中没有删除呢,还是mouseleave事件执行后,又新建的

理想情况:鼠标离开后,保证新建的div被删除

伪代码如下:

$(element).mouseover(function(e){
    $('body').append(div);
})
$(element).mouseleave(function(e){
    $(div).remove();
})

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
<body>
    <p id="p">testEl</p>
    <script>
        var element = $("#p")
        var div = document.createElement("div");
        $(element).mouseover(function(e){
            $('body').append(div);
            console.log(1)
        })
        $(element).mouseleave(function(e){
            $(div).remove();
            console.log(2)
        })
    </script>
</body>

按照这样尝试、没遇到题主说的问题啊、1和2都是交叉打印的、如何还原场景呢

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

1.4m articles

1.4m replys

5 comments

57.0k users

...