【鼠标无限移动】鼠标超出浏览器边界，怎么捕捉鼠标移动的方向和位移？

鼠标无限移动

朋友问了一个问题，没有鼠标的时候，鼠标超出浏览器边界，怎么捕捉鼠标移动的方向和位移？
这~ 不好说
但是朋友让看了一个demo是cesim+XbsjEarth 实现了。

那就研究一下吧

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 100vw;
            height: 100vh;
            border: 1px solid red;
            background: url(./bg.jpeg) 0 0 no-repeat;
        }
    </style>
<div class="box" id="box"></div>

<script>
        window.onload = function () {
            //document.pointerLockElement    当前被锁定的元素
            var box = document.getElementById("box")

            //添加移动事件
            function moveHadle(e){
                console.log('捕捉移动位移即可',e)
            }
            //鼠标锁定状态（鼠标直接消失），鼠标无限滚动，坐标无限变化
            function pointerLock(e) {
                box.requestPointerLock = box.requestPointerLock || box.msRequestPointerLock || box.mozRequestPointerLock || box.webkitRequestPointerLock;
                //点一下 锁上，再点一下放开
                if(document.pointerLockElement == box){
                    if (document.exitPointerLock) document.exitPointerLock()
                    //解除move 事件
                    console.log("解除")
                    document.removeEventListener("mousemove",moveHadle,false)
                }else{
                    if (box.requestPointerLock) box.requestPointerLock()
                }
            }
            box.addEventListener('click', pointerLock, false)


            //当进入锁定状态时 给dom一个移动事件，捕获移动
            function lockChange (e){
                if(document.pointerLockElement == box){
                    document.addEventListener("mousemove",moveHadle,false)
                }
            }
            document.addEventListener('pointerlockchange',lockChange,false)
        }
    </script>

主要是这个鼠标锁定事件requestPointerLock，按ESC 既能锁定鼠标，进入无限移动状态。
✿✿ヽ(°▽°)ノ✿