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. GIS开源程序收集

    每一个项目包含以下信息: 名称 主题 分类 描述 开始时间 语言 许可 演示网址 项目网址 成熟度 活跃度 评价   分类包括:GIS基础函数库.GIS控件.GIS桌面程序.GIS数据引擎.WEBGI ...

  2. c++ 引用 日期&时间

    日期时间[点击进入看吧,没啥可后期拓展的] 引用 引用变量是一个别名,也就是说,它是某个已存在变量的另一个名字.一旦把引用初始化为某个变量,就可以使用该引用名称或变量名称来指向变量. 一.引用和指针的 ...

  3. discuz 设置

    veikei_dz_com_20120821_gray_free 模板  论坛 瀑布流 需要在后台设置  论坛--板块管理--编辑对应板块--扩展设置--开启图片列表模式 FAQ 帮助页面 在后台管理 ...

  4. Linux学习笔记（14）linux在6.x和7.x系列的安装与基本使用区别

    关键词,centos7 centos6.x安装与使用:https://www.cnblogs.com/gered/p/9440551.html centos7.x安装与使用(本文)转自:https:/ ...

  5. 洛谷 P3386 二分图匹配 题解

    题面 这道题虽然是练习匈牙利算法的,但可以用网络流来切掉它: 我们可以建立一个超级源和一个超级汇,超级源连接左部分点,超级汇连接右部分点: 然后在该图上跑最大流就可以了: PS:我设的超级源是2001 ...

  6. C++继承中的同名覆盖

    1,父子间的冲突是由继承带来的,两个类之间存在了继承的关系,必然的会带来一 些问题,本文要讨论的是父子之间成员变量或成员函数的命名问题: 2,思考: 1,子类中是否可以定义父类中的同名成员? 1,可以 ...

  7. PHP手册在7.1迁移页面给出了替代方案,就是用OpenSSL取代MCrypt.

    /**  * [AesSecurity aes加密,支持PHP7.1]  */ class AesSecurity {     /**      * [encrypt aes加密]      * @p ...

  8. Oracle及SQLPLUS使用笔记

    Oracle及SQLPLUS使用笔记 自己之前粗粗的学过MySQL,学校用的是Oracle,学生使用sqlplus,这是个命令行界面的数据库管理软件(为了学习嘛,不用图形化可以理解),这里记录一些使用 ...

  9. c#获取网络时间

    public static DateTime GetInternetDate()        {            var client = new TcpClient("time.n ...

  10. luogu P5371 [SNOI2019]纸牌

    传送门 打麻将+1(雾 有顺子这种东西...注意到以某个位置为开头的顺子数量最多为2,那么有个想法就是枚举以每个位置为开头的顺子个数,然后每个位置的刻子的取法个数为\(\lceil\frac{\tex ...