鼠标移入图片会发生抖动？疯狂抖动，将onmouseout和onmouseover事件改为onmouseleave 和onmouseenter，仍然不行，求解！

放大镜

我测了一下你的代码，问题出在当你鼠标移入图片时，你遮挡层出现了，此时鼠标没有在图片上，所以遮挡层又没了，当你不停的滑动时，他就会在两种状态之间来回切换，所以会不停闪烁，你把html代码改成下面这样就可以了

pointer-events: none 给遮罩层加一个属性
——————————————————————
.zhe {
position: absolute;
left: 0;
top: 0;
width: 60%;
height: 60%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
pointer-events: none
}


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放大镜</title>
    <style>
        .small {
            position: relative;
            width: 200px;
            height: 200px;
            border: 1px solid;
        }

        div.img {
            position: relative;
            height: 200px;
        }

        .img img {
            position: absolute;
            width: 200px;
            height: 200px;
        }

        .zhe {
            position: absolute;
            left: 0;
            top: 0;
            width: 60%;
            height: 60%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
        }

        .large {
            position: absolute;
            right: 0px;
            top:0;
            left: 204px;
            height: 400px;
            width: 400px;
            border: 1px solid;
            overflow: hidden;
            display: none;
        }
        .large>img{
            position: absolute;
            width: 200%;
            height: 200%;
            left: 0px;
            top:0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="small">
            <div class="img">
                <img src="../image/orangeTea.jpg" alt="">
            </div>
            <div class="zhe">

            </div>

            <div class="large">
                <img src="../image/orangeTea.jpg" alt="">
            </div>
        </div>
    </div>
</body>
<script>
    // 获取small盒子
    var small = document.querySelector(".small")
    // 获取遮挡层
    var zhe = document.querySelector(".zhe")
    // .img 下的img
    var img = document.querySelector(".img img")
    var large_img = document.querySelector(".large img")
    var large = document.querySelector(".large")

    // 获取小img的父级
    var par_img=document.querySelector(".img")

    par_img.addEventListener("mouseover",function(){
        zhe.style.display="block"
        large.style.display="block"
        // e.stopPropagation()
    })

    par_img.addEventListener("mouseout",function(){
        zhe.style.display="none"
        large.style.display="none"
        // console.log(1);
        // e.stopPropagation()
    })
    small.addEventListener("mousemove", function (e) {
        var e = e || window.event;
        // console.log(2);
        //控制遮挡层移动    
        zhe_movex = e.pageX - zhe.offsetWidth / 2 - this.offsetLeft //this.offsetLeft   small和文档最左端的偏移量
        zhe_movey = e.pageY - zhe.offsetHeight / 2 - this.offsetTop
        // 小图片移动的最大宽度
        var maxmovex = img.offsetWidth - zhe.offsetWidth
        var maxmovey = img.offsetHeight - zhe.offsetHeight
        // 给遮挡层固定区域
        if (zhe_movex < 0) {
            zhe_movex = 0
        } else if (zhe_movex > maxmovex) {
            zhe_movex = maxmovex
        }
        if (zhe_movey < 0) {
            zhe_movey = 0
        } else if (zhe_movey > maxmovey) {
            zhe_movey = maxmovey
        }
        zhe.style.left = zhe_movex + "px"
        zhe.style.top = zhe_movey + "px"
        // 判断.large下的img移动的最大宽度和最大高度
        var large_imgMax = large_img.offsetWidth - large.offsetWidth
        var large_imgMay = large_img.offsetHeight - large.offsetHeight
        // 算出比例   大图片移动距离=小图片的移动距离*小图片的最大移动距离/大图片的最大移动距离

        var large_imgx=zhe_movex * large_imgMax / maxmovex
        var large_imgy=zhe_movey * large_imgMay / maxmovey
        large_img.style.left = -large_imgx+"px"
        large_img.style.top = -large_imgy+"px"
    })
</script>

</html>

你好可以做个防抖呢