两个方块都绑定整个页面document可以吗

最新推荐文章于 2024-05-30 11:27:58 发布

卷头发的秃头酱

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量521

点赞数

文章标签： javascript html 前端 css

本文链接：https://blog.csdn.net/qq_48254349/article/details/121868489

版权

让红色方块随着鼠标的移动而移动，绑定的事件是div 鼠标是受系统监控的也就是说系统规定了鼠标一秒可以移动多少次同时红色也受系统监听系统对鼠标的监听的面积高于红色方块所以事件监听跟不上鼠标监听经常鼠标移出方块了方块还没监听到但是在document上挪怎么挪都挪不出去

  div.onmousedown = function(e)
        {
            disX =  e.pageX -parseInt( div.style.left);
            disY =  e.pageY -parseInt( div.style.top);
            div.onmousemove = function(e)//绑定的事件是div 鼠标在div上挪动才好使 但是鼠标是受系统监控的 但对事件的监听少于鼠标 事件跟不上鼠标
        {
            var event = e || window.event;
            console.log(e.pageX + "" + e.pageY);
            div.style.left = e.pageX -disX + "px" ;
            div.style.top = e.pageY - disY+ "px";
        }
        div.οnmοuseup= function(e)
        {
            div.onmousemove  = null;//
        }

但是屏幕上只有一个方块，如果同时有两个方块，为了达到跟上鼠标的速度，都采用了以上的方式，两者能使用同一个document，不会冲突吗？所以我试验了一下

<body>
    <div style="width: 100px;height: 100px;background-color: red;position: absolute;left: 0;top: 0;"></div>
    <div style="width: 100px;height: 100px;background-color: forestgreen;position: absolute;left: 500px;top: 500px;"></div>
    <script type="text/javascript">
        var div = document.getElementsByTagName('div')[0];
        var div1 = document.getElementsByTagName('div')[1];
        var disX ,disY;  //鼠标刚点上图片的位置，此后移动位置也要在那 因为方块的位置刚开始是鼠标移动的位置 
        //并且方块设置的是靠左靠上 所以鼠标会一直在方块靠左靠上的位置，因此需要将方块设置成比实际位置移动少一些 这样鼠标才能在方块内容区的位置
        //而我们又想让鼠标的位置从点上之后即使在后面移动也不变，所以这个少移动的位置就需要固定 也就是刚开始点击下的鼠标位置减去
       document.onmousedown = function(e)
        {
            disX =  e.pageX -parseInt( div.style.left);
            disY =  e.pageY -parseInt( div.style.top);
            document.onmousemove = function(e)//绑定的事件是div 鼠标在div上挪动才好使 但是鼠标是受系统监控的 但对事件的监听少于鼠标 事件跟不上鼠标

        {
            var event = e || window.event;
            console.log(e.pageX + "" + e.pageY);
            div.style.left = e.pageX -disX + "px" ;
            div.style.top = e.pageY - disY+ "px";
        }
       document.onmouseup= function(e)
        {
            document.onmousemove  = null;//
        }
        }

       document.onmousedown = function(e)
        {
            disX =  e.pageX -parseInt( div1.style.left);
            disY =  e.pageY -parseInt( div1.style.top);
            document.onmousemove = function(e)//绑定的事件是div 鼠标在div上挪动才好使 但是鼠标是受系统监控的 但对事件的监听少于鼠标 事件跟不上鼠标
        {
            var event = e || window.event;
            console.log(e.pageX + "" + e.pageY);
            div1.style.left = e.pageX -disX + "px" ;
            div1.style.top = e.pageY - disY+ "px";
        }
        document.onmouseup= function(e)
        {
            document.onmousemove  = null;//
        }
        }

     
    </script>
</body>

在这里插入图片描述
即使我点了红色方块也毫无反应，只有点绿色方块时才会移动

暂时我还没找到原因，后续解决了再更新

卷头发的秃头酱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两个方块都绑定整个页面document可以吗

让红色方块随着鼠标的移动而移动，绑定的事件是div 鼠标是受系统监控的也就是说系统规定了鼠标一秒可以移动多少次同时红色也受系统监听系统对鼠标的监听的面积高于红色方块所以事件监听跟不上鼠标监听经常鼠标移出方块了方块还没监听到但是在document上挪怎么挪都挪不出去 div.onmousedown = function(e) { disX = e.pageX -parseInt( div.style.left); d
复制链接

扫一扫