event对象中offsetX,clientX,pageX,screenX的区别

1、offsetX
offset意为偏移量,是事件对象距左上角为参考原点的距离。以元素盒子模型的内容区域的左上角为参考点。不包括border。
2、clientX
事件对象相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条
3、pageX
事件对象相对于整个文档的坐标以像素为单位.
4、screenX
事件对象相对于设备屏幕的左上角的坐标,当改变屏幕的分辨率的时候,坐标会随之改变.

以上除了screenX/Y以设备像素为单位，其他都是以css像素为单位
下面以一个实例来解释说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            margin: 0 auto;
            padding: 0;
        }
        #canvas{
            border:20px solid blue;

            margin-left: 300px;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
<script>
    var canvas=document.getElementById(‘canvas‘);
    var ctx=canvas.getContext(‘2d‘);
    ctx.arc(0,0,5,0,2*Math.PI);
    ctx.arc(200,200,5,0,2*Math.PI);
    ctx.font="20px Arial";
    ctx.textAlign=‘start‘;
    ctx.fillText("画布坐标200 200",200,200);
    ctx.fill();
    canvas.onmousedown=function (e) {
        console.log("e.offsetX=",e.offsetX);
        console.log("e.clientX=",e.clientX);
        console.log("e.pageX=",e.pageX);
        console.log("e.screenX=",e.screenX);
    }
</script>

技术图片
当没有滚动条的时候,pageX==clientX,offsetX=pageX+(margin-left)+border

技术图片

当有滚动条的时候,pageX!=clientX