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 {
                  width: 600px;
                  height: 600px;
                  border: 1px solid black;
                  position: absolute;
                  left: 500px;
                  top: 30px;
            }

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

            #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");

                  BOX1.onmouseover = function () {
                        Mengceng.style.display = "block";
                  }
                  BOX1.onmouseout = function () {
                        Mengceng.style.display = "none";
                  }

                  BOX1.onmousemove = function(ev){
                        var e = ev || window.event;
                        if(e.clientX <= 60){
                              e.clientX  = 60;
                        }
                        Mengceng.style.left = e.clientX - 60 + "px";
                        Mengceng.style.top = e.clientY - 60 + "px";   
                  }
                  
            }
      </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(e.clientX <= 60){

e.clientX = 60;

}

无法让蒙层框不出左边界？

答

e.clientX的值是只读的，不能修改，你可以定义一个变量，

变量获取e.clientX的值，判断后改变。

js问题，为什么代码这样写是错的？

相关推荐