javascript - onmousemove为什么一定要委托在document上？-PHP中文网问答

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0px; padding: 0px;}
            p {
                width: 200px;
                height: 200px;
                background: green;
                position: absolute;
                cursor: move;
            }
        </style>
    </head>
    <body>
        <p></p>
    </body>
    <script type="text/javascript">
        var p = document.querySelector('p');
        
        var pWidth = p.offsetWidth;
        var pHeight = p.offsetHeight;
        var maxWidth = document.documentElement.clientWidth - pWidth;
        var maxHeight = document.documentElement.clientHeight - pHeight; 
    
        p.onmousedown = function(e){
            var pLeft = p.offsetLeft;
            var pTop = p.offsetTop;
            var eLeft = e.clientX;
            var eTop = e.clientY;
            var _x = eLeft - pLeft;
            var _y = eTop - pTop;
            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;
                }
                
            p.style.left = x+'px';
            p.style.top = y+'px';
            }    
        }
        
        document.documentElement.onmouseup = function(){
            document.documentElement.onmousemove = null;
        }
        
        
        
    </script>
</html>