简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 【js】mouseleave事件在鼠标快速移动的情况下导致执行异常，寻找解决思路？
黄舟
黄舟 2017-04-11 11:53:53
0
4
745

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

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

理想情况：鼠标离开后，保证新建的p被删除

伪代码如下：

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

人生最曼妙的风景，竟是内心的淡定与从容！

모든 응답(4)
阿神
阿神2017-04-11 11:55:53 4층 
<body>
    <p id="p">testEl</p>
    <script>
        var element = $("#p")
        var p = document.createElement("p");
        $(element).mouseover(function(e){
            $('body').append(p);
            console.log(1)
        })
        $(element).mouseleave(function(e){
            $(p).remove();
            console.log(2)
        })
    </script>
</body>

按照这样尝试、没遇到题主说的问题啊、1和2都是交叉打印的、如何还原场景呢
좋다 +0
답글 추가
Ty80
Ty802017-04-11 11:55:53 3층

嗯，鼠标移动太快是会这样。还是得把删除操作放到其它事件里。试试 rollOut()

좋다 +0
답글 추가
迷茫
迷茫2017-04-11 11:55:53 2층

使用throttle函数控制执行间隔。

좋다 +0
답글 추가
伊谢尔伦
伊谢尔伦2017-04-11 11:55:53 1층

程序执行是有一定时间的，如果过快可能两个事件就冲突了。建议楼主加一个判断，就对需要移除的元素做判断，如果你再新增的时候，发现上次移除的元素还在，那么你就重复一次删除操作即可，完了你再执行添加。

좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！