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条)

报告相同问题?

悬赏问题

  • ¥15 linux驱动,linux应用,多线程
  • ¥20 我要一个分身加定位两个功能的安卓app
  • ¥15 基于FOC驱动器,如何实现卡丁车下坡无阻力的遛坡的效果
  • ¥15 IAR程序莫名变量多重定义
  • ¥15 (标签-UDP|关键词-client)
  • ¥15 关于库卡officelite无法与虚拟机通讯的问题
  • ¥15 目标检测项目无法读取视频
  • ¥15 GEO datasets中基因芯片数据仅仅提供了normalized signal如何进行差异分析
  • ¥100 求采集电商背景音乐的方法
  • ¥15 数学建模竞赛求指导帮助