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. 按需加载controller——angular

    一.多视图应用 AngularJS 通过路由支持多视图应用, 可以根据路由动态加载所需的视图.随着视图的不断增加, js文件会越来越多, 而 AngularJS 默认需要把全部的 js 都一次性加载, ...

  2. 通过NGINX location实现一个域名访问多个项目

    location ~ \.php$ { root /home/webroot;    //此目录下有多个项目 project1 ,project2... fastcgi_pass $php_upstr ...

  3. js移动端滑动效果

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  4. BeautifulSoup解析豆瓣即将上映的电影信息

    工欲善其事,必先利其器,我们首先得了解beautifulsoup的使用,这其实是一个比较简单的东西   BeautifulSoup的基本使用语法规则 .find() 使用示例 soup.find('a ...

  5. Java的前后端需要了解些什么？

    一.Java概念 Java具有简单性.面向对象.分布式.健壮性.安全性.平台独立与可移植性.多线程.动态性等特点.Java可以编写桌面应用程序.Web应用程序.分布式系统和嵌入式系统应用程序等. Ja ...

  6. centos6.5安装mysql报错

    安装完mysql后,mysql服务无法打开. 报错 查看mysql日志 执行命令:less /var/log/mysqld.log  发现是权限不够,不能创建pid文件.因此改变权限,再次启动服务 问 ...

  7. 《Python编程从0到1》笔记2——表达式竟然也有副作用

    在表达式的求值过程中,对状态的改变称为表达式的副作用.Python中内建的各种运算符(此处是狭义的含义,如加减乘除比较等运算符,并不包含用户自定义的运算符或函数)是没有副作用的,但各种函数调用时常带有 ...

  8. 五、Kubernetes_V1.10集群部署-master-部署组件

    一.配置apiserver 1.生成启动文件 cat > /usr/lib/systemd/system/kube-apiserver.service <<EOF [Unit] De ...

  9. 洛谷 P2398 GCD SUM 题解

    题面 挺有意思的. 设f[i]表示gcd(i,j)=i的个数,g[i]表示k|gcd(i,j)的个数; g[i]=(n/i)*(n/i); g[i]=f[i]+f[2i]+f[3i]+...; 所以f ...

  10. Comet OJ - Contest #13

    Rank53. 第一次打这种比赛.还是有不少问题的,以后改吧. A题WA了两次罚了不少时. C写到一半发现只能过1,就先弃了. D一眼没看出来.第二眼看出来就是一个类似于复数的快速幂. 然后B切了. ...