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. 阶段3 2.Spring_07.银行转账案例_9 基于子类的动态代理

    代理一个普通的java类 导入cglib的包 它还有一个asm的依赖.会自动加进来 创建cglib的文件夹.把proxy里面的Client和Producer复制到cglib文件夹 Producer不实 ...

  2. 问题：anaconda: command not found

    打开Terminal 1.使用命令:sudo apt install vim 安装vim文本编辑器2.使用命令:vim ~/.bashrc 修改环境变量 3.在文本最后添加命令:export PATH ...

  3. The window object

    At the core of the BOM is the window object, which represents an instance of the browser. The window ...

  4. 连接Xshell

    连xshell之前先进入[root@localhost zxj]# vim /etc/ssh/sshd_config, 将115行删除注释改为UseDNS  no, 保存重启sshd(xshell)的 ...

  5. 安装 docker-registry-frontend

    拉取镜像  最新的V2 docker pull konradkleine/docker-registry-frontend:v2 创建 docker-compose.yml version: ' se ...

  6. spring boot 数据源配置YAML格式

    spring: datasource: url: jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf- ...

  7. Python 正则匹配网页内的IP地址及端口号

    #!/usr/bin/env python # -*- coding: utf-8 -*- # @Date : 2017-08-30 20:38:23 # @Author : EnderZhou (z ...

  8. Redis数据类型Strings、Lists常用操作指令

    Redis数据类型Strings.Lists常用操作指令 Strings常用操作指令 GET.SET相关操作 # GET 获取键值对 127.0.0.1:6379> get name (nil) ...

  9. MySQL -2- 体系结构

    1. 体系结构 1.1 C/S(客户端/服务端)模型介绍   image TCP/IP方式(远程.本地): mysql -uroot -poldboy123 -h 10.0.0.51 -P3306 S ...

  10. dp常见优化方法

    noip范围内的dp优化方法: 加速状态转移 1.前缀和优化 2.单调队列优化 3.线段树或树状数组优化 精简状态 3:精简状态往往是通过对题目本身性质的分析,去省掉一些冗余的状态.相对以上三条套路性 ...