js问题，为什么代码换个顺序就不能正确执行了？

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

<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            #box1 {
                  width: 300px;
                  height: 300px;
                  border: 1px solid black;
                  position: absolute;
                  left: 30px;
                  top: 30px;
            }

            #box1 img {
                  width: 100%;
                  height: 100%;
            }

            #box2 {
                  display: none;
                  width: 300px;
                  height: 300px;
                  border: 1px solid white;
                  position: absolute;
                  left: 500px;
                  top: 30px;
                  overflow: hidden;
            }

            #box2 img {

                  width: 600px;
                  height: 600px;
                  position: absolute;
                  top: 0;
                  left: 0;
            }

            #mengceng {
                  display: none;
                  width: 70px;
                  height: 70px;
                  background-color: black;
                  position: absolute;
                  top: 0;
                  left: 0;
                  opacity: 0.5;
            }
      </style>
      <script>
            window.onload = function () {
                  var BOX1 = document.getElementById("box1");
                  var BOX2 = document.getElementById("box2");
                  var Mengceng = document.getElementById("mengceng");
                  var IMG = BOX2.getElementsByTagName("img")[0];
                  BOX1.onmouseover = function () {
                        Mengceng.style.display = "block";
                        BOX2.style.display = "block";
                  }
                  BOX1.onmouseout = function () {
                        Mengceng.style.display = "none";
                        BOX2.style.display = "none";
                  }

                  BOX1.onmousemove = function(ev){
                        var e = ev || window.event;
                        var l = e.clientX - 60;
                        var t = e.clientY - 60;
                        
                        Mengceng.style.left = l+ "px";
                        Mengceng.style.top = t + "px"; 
                        IMG.style.left =  l * -2 + "px";
                        IMG.style.top = t * -2 + "px";
                        if(l <= 0){
                              l = 0;
                        }
                        if(l >= 230){
                              l = 230;
                        }
                        if(t <= 0){
                              t = 0;
                        }
                        if(t >= 230){
                              t = 230;
                        }
                  }
                  
            }
      </script>
</head>
<body>
      <div id="box1">
            <img src="../图片的使用/放大镜图片.jfif" alt="">
            <div id="mengceng"></div>
      </div>
      <div id="box2">
            <img src="../图片的使用/放大镜图片.jfif" alt="">
      </div>
</body>

</html>

我把

if(l <= 0){

l = 0;

}

if(l >= 230){

l = 230;

}

if(t <= 0){

t = 0;

}

if(t >= 230){

t = 230;

}

代码放到

var e = ev || window.event;

var l = e.clientX - 60;

var t = e.clientY - 60;

Mengceng.style.left = l+ "px";

Mengceng.style.top = t + "px";

IMG.style.left = l * -2 + "px";

IMG.style.top = t * -2 + "px";

下面后，if的代码就不能正常执行了，这是为什么?函数的调用里面的代码不是不分顺序的吗？

if语句如果放在后面等于没有写，因为每次移动的时候都会重新更新变量的值，并且控件已经定位。

你修改以后，下次再执行move方法时，又被

var l = e.clientX - 60;

var t = e.clientY - 60;

修改了。