event對象中offsetX,clientX,pageX,screenX的區別

時間 2019-11-08

標籤 event 對象 offsetx clientx pagex screenx 區別简体版

原文原文鏈接

一、offsetX
offset意爲偏移量,是事件對象距左上角爲參考原點的距離。以元素盒子模型的內容區域的左上角爲參考點。不包括border。
二、clientX
事件對象相對於瀏覽器窗口可視區域的X,Y座標(窗口座標),可視區域不包括工具欄和滾動條
三、pageX
事件對象相對於整個文檔的座標以像素爲單位.
四、screenX
事件對象相對於設備屏幕的左上角的座標,當改變屏幕的分辨率的時候,座標會隨之改變.javascript

以上除了screenX/Y以設備像素爲單位，其餘都是以css像素爲單位
下面以一個實例來解釋說明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)+borderhtml