终于弄明白 pageX,pageY,screenX,offsetX,offsetY,screenY,clientX,clientY的区别

前言

在VUE里做例子测试：

HTML模块：

<template>
    <div id="box" @click="clickEvt"></div>
</template>

JS代码：

<script>
export default {
    data () {
        return {
    },
    methods: {
        clickEvt (e) {
            // 1、screenX,screenY: 获取鼠标点击的点距离-屏幕左侧和顶端的距离
            console.log(e.screenX,e.screenY)
            // 2、clientX,clientY: 获取鼠标点击的点距离-视口的左侧距离和顶端距离(不受滚动条影响)
            // console.log(e.clientX,e.clientY)
            // 3、pageX,pageY：获取鼠标点击的点距离-页面的左侧距离和页面顶端距离(受滚动条影响)
            // console.log(e.pageX,e.pageY)
            // 总结2、3的区别： clientX,clientY不管有没有滚动条总是相对视觉窗口的线对照的，
            而pageX,pageY不对 对照窗口变化，而是对照页面边距对应。
            // 4、offsetX,offsetY：获取鼠标点击的点距离-自身左侧和顶端的距离
            // console.log(e.offsetX,e.offsetY)
            // 5、x,y 与 clientX,clientY 是一样的
            // console.log(e.x,e.y)
         }
    }
}
</script>

css部分：

<style lang="scss" scoped>
body{
    height: 3000px;
}
#box{
    width:200px;
    height:200px;
    background:red;
}
</style>

1、screenX、screenY截图:

2、clientX、clientY截图：

3、pageX、pageY截图：

4、offsetX、offsetY截图：