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

时间：2023-03-08 21:42:43
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>

event对象中offsetX,clientX,pageX,screenX的区别
当没有滚动条的时候,pageX==clientX,offsetX=pageX+(margin-left)+border

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

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

相关文章