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

event对象中offsetX,clientX,pageX,screenX的区别的更多相关文章

  1. 一张图看懂offsetX, clientX, pageX, screenX的区别

    1.具体含义见下图1 2.浏览器的兼任情况

  2. 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别

    通过 3 张图和 1 张表格,轻松区别 JavaScript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: & ...

  3. [1]区分event对象中的[clientX,offsetX,screenX,pageX]

    前言 在平时的开发中,非常讨厌的就是兼容性了,兼容性的问题总会让我们记忆混淆,所以这次来区分一下event对象中的常用获取鼠标位置. clientX clientY event.clientXeven ...

  4. event对象中 target和currentTarget 属性的区别。

    首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素

  5. 小程序开发 event对象中 target和currentTarget 属性的区别。

    首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素 p包含在div内 在outer上点击时,target跟currentTarget ...

  6. clientX,offsetX,layerX,pageX,screenX,X鼠标位置全解

    clientX,offsetX,layerX,pageX,screenX,X有时容易记混,通过测试当前的主流浏览器疏理了自己的一些看法以供参考. Chrome下(测试版本为51.0.2704.106  ...

  7. 页面元素坐标和偏移（clientX/pageX/screenX/layerX/offsetWidth/scrollWidth/clientWidth等）相关整理

    鼠标事件都是在特定位置发生的,我们可以通过event事件对象的各种属性来获得事件发生的坐标位置,有相对于视口的,有相对于整个文档的,同样页面元素的位置也有相对视口的,也有滚动后的,这些都比较容易混淆, ...

  8. offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight,clientX,pageX,screenX

    offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度 ...

  9. 在 JS 对象中使用 . 和 [] 操作属性的区别

    在 JS 对象中,调用属性一般有两种方法--点和中括号的方法. 例如 使用点方法 var obj = { name: "cedric" } console.log(obj.name ...

随机推荐

  1. PyCharm安装+破解

    PyCharm 是一款功能强大的 Python 编辑器,具有跨平台性,鉴于目前最新版 PyCharm 使用教程较少,为了节约时间,来介绍一下 PyCharm 在 Windows下是如何安装的. 这是 ...

  2. SAS数据挖掘实战篇【七】

    SAS数据挖掘实战篇[七] 6.5  SAS EM数据挖掘-----预测模型 1  问题定义 目标:建立模型预测贷款申请的信用状态,选择最优的模型来预测和减少损失. 数据集:SAMPSIO.DMAGE ...

  3. java：常用类(包装类,equals和==的比较，Date，java.lang.String中常用方法，枚举enum)

    *包装类: 将基本类型封装成类,其中包含属性和方法以方便对象操作. *byte---->Byte *short--->Short *long--->Long *float---> ...

  4. java：Oracle（聚合函数，多表查询，表之间的关系）

    1.聚合函数 --max,min,sum,avg,count,nvl(,) -- max:最大值 -- max既能取数字的最大值,也可以取字符串的最大值(英文字母排列顺序),根据场景实际意义来看,最好 ...

  5. C#打开文件

    C#中经常用到的功能,打开文件: /// <summary> /// 打开文件,可选择多个文件 /// </summary> /// <param name=" ...

  6. April.Util更新之权限

    目录 前言 权限 中间层 小结 前言 在之前已经提到过,公用类库Util已经开源,目的一是为了简化开发的工作量,毕竟有些常规的功能类库重复率还是挺高的,二是为了一起探讨学习软件开发,用的人越多问题也就 ...

  7. python003

    一.列表 1.列表是有序的,列表的元素可以修改# list 类li=[1,22,'ss','zp',['qqqq',111,33,['eeeeeeeee'],'ddddd',True]] #通过lis ...

  8. 【HANA系列】SAP ECLIPSE中创建ABAP项目失败原因解析

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP ECLIPSE中创建AB ...

  9. 【VS开发】【智能语音处理】Windows下麦克风语音采集

    简介 这是我很早以前的大学毕业设计,忽然间找到贴出来以纪念自己的纯真年代...但是因为CSDN不给面子所以导致短短的一篇文章贴了足足7次..他老提时说文章超过了64K,老大,拜托,那是算上了里面的图片 ...

  10. xpath 的用法

                                              爬虫利器xpath xpath术语 节点(node)