鼠标事件对象 e.clientX e.clientY等MouseEvent

<style>
    body {
        height: 4000px;
    }


    img {
        position: absolute;
        height: 70px;
         70px;
        transform: translate(-50%, -50%);

    }
</style>

<img src="../images/下午好.gif" alt="">

<script>
    document.addEventListener('click', fn);
    function fn(e) {
        // client返回的是在可视区的x，y坐标
        console.log(e.clientX, e.clientY);

        //page 返回的是相对于文档页面的的x，y坐标（滚动条）
        console.log(e.pageX, e.pageY);

        // screen返回的是相对于电脑屏幕的x，y坐标
        console.log(e.screenX, e.screenY);
    }


    // 图片跟随鼠标案例
    var img = document.querySelector('img');
    document.addEventListener('mousemove', fn1);
    function fn1(e2) {
        // 重点是client返回的x，y是数值，要加上单位px
        img.style.left = e2.clientX + 'px';
        img.style.top = e2.clientY + 'px';
        console.log(e2.clientX, e2.clientY);
    }

</script>