JavaScript鼠标拖动

最新推荐文章于 2023-11-28 11:58:47 发布

明日清风留

最新推荐文章于 2023-11-28 11:58:47 发布

阅读量278

点赞数

分类专栏： javascript

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

下面先看一个有bug的版本，就是鼠标移动太快后方块会跟不上鼠标的移动，然后鼠标就离开了方块区域，而事件都是绑定在方块（div）上的，所以当鼠标离开方块后方块就停了下来，当鼠标（无论是否松开鼠标左键）回到方块区域方块又会跟着鼠标移动。

出现这种问题的原因是：系统监听鼠标移动的频次小于鼠标移动的频次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标拖动</title>
</head>
<body>
    <div style="width:100px;height:100px;background-color:red;position:absolute;left:0;top:0;"></div>
    <script type="text/javascript">
        var div=document.getElementsByTagName('div')[0];
        var disX,//鼠标与方块左上角顶点的差值
            disY;
       div.onmousedown=function(e){
           disX=e.pageX-parseInt(div.style.left);
           disY=e.pageY-parseInt(div.style.top);
          div.onmousemove=function(e){
               var event=e||window.event;//兼容
               div.style.left=e.pageX-disX+"px";//减去差值
               div.style.top=e.pageY-disY+"px";
           }
           div.onmouseup=function(){
              div.onmousemove=null;
           }
       }
    </script>
</body>
</html>

解决的方案就是不把onmousemove绑定在方块上，而是绑定在document上，鼠标怎么移动也不可能移出document，而onmousedown依旧绑定在div上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标拖动</title>
</head>
<body>
    <div style="width:100px;height:100px;background-color:red;position:absolute;left:0;top:0;"></div>
    <script type="text/javascript">
        var div=document.getElementsByTagName('div')[0];
        var disX,//鼠标与方块左上角顶点的差值
            disY;
       div.onmousedown=function(e){
           disX=e.pageX-parseInt(div.style.left);
           disY=e.pageY-parseInt(div.style.top);
          document.onmousemove=function(e){//div->document
               var event=e||window.event;//兼容
               div.style.left=e.pageX-disX+"px";//减去差值
               div.style.top=e.pageY-disY+"px";
           }
           document.onmouseup=function(){//div->document
              document.onmousemove=null;  //div->document
           }
       }
    </script>
</body>
</html>

以上代码来自视频https://ke.qq.com/webcourse/index.html#cid=231577&term_id=100273169&taid=1731610554894489&vid=d1419v9ipcp

明日清风留

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript鼠标拖动

下面先看一个有bug的版本，就是鼠标移动太快后方块会跟不上鼠标的移动，然后鼠标就离开了方块区域，而事件都是绑定在方块（div）上的，所以当鼠标离开方块后方块就停了下来，当鼠标（无论是否松开鼠标左键）回到方块区域方块又会跟着鼠标移动。出现这种问题的原因是：系统监听鼠标移动的频次小于鼠标移动的频次。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&...
复制链接

扫一扫