onmousemove为什么一定要委托在document上？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0px; padding: 0px;}
            div {
                width: 200px;
                height: 200px;
                background: green;
                position: absolute;
                cursor: move;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    <script type="text/javascript">
        var div = document.querySelector('div');
        
        var divWidth = div.offsetWidth;
        var divHeight = div.offsetHeight;
        var maxWidth = document.documentElement.clientWidth - divWidth;
        var maxHeight = document.documentElement.clientHeight - divHeight; 
    
        div.onmousedown = function(e){
            var divLeft = div.offsetLeft;
            var divTop = div.offsetTop;
            var eLeft = e.clientX;
            var eTop = e.clientY;
            var _x = eLeft - divLeft;
            var _y = eTop - divTop;
            document.documentElement.onmousemove = function(ev){
                console.log(111);
                var evLeft = ev.clientX;
                var evTop = ev.clientY;
                var x = evLeft - _x;
                var y = evTop - _y;
                if(x>=maxWidth){
                    x = maxWidth;
                }
                if(x<0){
                    x = 0;
                }
                if(y>=maxHeight){
                    y = maxHeight;
                }
                if(y<0){
                    y = 0;
                }
                
            div.style.left = x+'px';
            div.style.top = y+'px';
            }    
        }
        
        document.documentElement.onmouseup = function(){
            document.documentElement.onmousemove = null;
        }
        
        
        
    </script>
</html>

阅读 3.8k

onmousemove为什么一定要委托在document上？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

为什么会出现CORS error？

请问一下，如何理解reduce函数呢？

如何实现从一个div中拖拽dom到另一个div容器？