>  Q&A  >  본문

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

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

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

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

伪代码如下:

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

모든 응답(4)나는 대답할 것이다

  • 阿神

    阿神2017-04-11 11:55:53

    <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
  • PHP中文网

    PHP中文网2017-04-11 11:55:53

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

    회신하다
    0
  • 迷茫

    迷茫2017-04-11 11:55:53

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

    회신하다
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-11 11:55:53

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

    회신하다
    0
  • 취소회신하다