m0_46602893 2021-04-24 14:29 采纳率: 91.5%
浏览 39
已采纳

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>
            #box{width: 200px;height: 200px;background-color: red;position: absolute;}
      </style>
      <script>
            window.onload = function(){
                  var Div = document.getElementById("box");
                  Div.onmousedown = function(ev){
                        var e = ev || window.event;
                         offsetX = e.clientX - Div.offsetLeft;
                         offsetY = e.clientY - Div.offsetTop;
                        
                  }
                  document.onmousemove = function(ev){
                        var e = ev || window.event;
                        Div.style.left = e.clientX - offsetX + "px";
                        Div.style.top = e.clientY - offsetY + "px";
                  }
                  
                        Div.onmouseup = function(e){
                        document.onmousemove = null;
                  }
            }
      </script>
</head>
<body>
      <div id="box"></div>
</body>
</html>

我知道把

document.onmousemove = function(ev){

                        var e = ev || window.event;

                        Div.style.left = e.clientX - offsetX + "px";

                        Div.style.top = e.clientY - offsetY + "px";

                  }

这段代码放到Div.onmousedown = function(ev)里面就对了,

但是为什么我这样写是错的?

  • 写回答

3条回答 默认 最新

  • Menkongkong 2021-04-25 09:23
    关注

    你给box元素添加了鼠标‘按下’和‘松开’两个事件,给document添加了鼠标移动事件。

    document的鼠标滑动事件是用来操纵box元素位置。

    box元素的按钮‘松开’事件是用来清除document的鼠标滑事件。

    当你这样写的时候,当鼠标按钮‘松开’事件触发,就清除了document的鼠标滑事件,box元素就无法移动。

    但是当你把document.onmousemove = function(ev)放在 Div.onmousedown = function(ev)函数里面就可以重复移动,是因为当你触发鼠标‘按下’事件后,会给document.onmousemove重新赋方法,然后在鼠标滑动时box元素会动,当鼠标松开后,清除document.onmousemove。当你再次触发鼠标‘按下’事件后,又会给document.onmousemove重新赋方法,所以可以重复移动。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥20 ue5运行的通道视频都会有白色锯齿
  • ¥20 用雷电模拟器安装百达屋apk一直闪退
  • ¥15 算能科技20240506咨询(拒绝大模型回答)
  • ¥15 自适应 AR 模型 参数估计Matlab程序
  • ¥100 角动量包络面如何用MATLAB绘制
  • ¥15 merge函数占用内存过大
  • ¥15 Revit2020下载问题
  • ¥15 使用EMD去噪处理RML2016数据集时候的原理
  • ¥15 神经网络预测均方误差很小 但是图像上看着差别太大
  • ¥15 单片机无法进入HAL_TIM_PWM_PulseFinishedCallback回调函数