event对象中offsetX,clientX,pageX,screenX的区别
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的区别的更多相关文章
- 一张图看懂offsetX, clientX, pageX, screenX的区别
1.具体含义见下图1 2.浏览器的兼任情况
- 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
通过 3 张图和 1 张表格,轻松区别 JavaScript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: & ...
- [1]区分event对象中的[clientX,offsetX,screenX,pageX]
前言 在平时的开发中,非常讨厌的就是兼容性了,兼容性的问题总会让我们记忆混淆,所以这次来区分一下event对象中的常用获取鼠标位置. clientX clientY event.clientXeven ...
- event对象中 target和currentTarget 属性的区别。
首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素
- 小程序开发 event对象中 target和currentTarget 属性的区别。
首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素 p包含在div内 在outer上点击时,target跟currentTarget ...
- clientX,offsetX,layerX,pageX,screenX,X鼠标位置全解
clientX,offsetX,layerX,pageX,screenX,X有时容易记混,通过测试当前的主流浏览器疏理了自己的一些看法以供参考. Chrome下(测试版本为51.0.2704.106 ...
- 页面元素坐标和偏移（clientX/pageX/screenX/layerX/offsetWidth/scrollWidth/clientWidth等）相关整理
鼠标事件都是在特定位置发生的,我们可以通过event事件对象的各种属性来获得事件发生的坐标位置,有相对于视口的,有相对于整个文档的,同样页面元素的位置也有相对视口的,也有滚动后的,这些都比较容易混淆, ...
- offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight,clientX,pageX,screenX
offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度 ...
- 在 JS 对象中使用 . 和 [] 操作属性的区别
在 JS 对象中,调用属性一般有两种方法--点和中括号的方法. 例如 使用点方法 var obj = { name: "cedric" } console.log(obj.name ...
随机推荐
- zk 两阶段提交（待完善）
zk 节点是一个 QuorumPeer,选举结束后,leader 和 follower 各自执行自己的逻辑: org.apache.zookeeper.server.quorum.QuorumPeer ...
- CentOS 7 Docker 安装
CentOS Docker 安装 Docker支持以下的CentOS版本: CentOS 7 (64-bit) CentOS 6.5 (64-bit) 或更高的版本 本文以 CentOS 7.6 版本 ...
- yum 安装docker后 无法启动
一,yum安装docker yum -y install docker 启动docker service docker start 报错: journalctl -xe Error starting ...
- linux 设备树中 dwc3 节点的phys参数含义
找了好久今天找到了,记录一下: &dwc3_0 { ... phys = <&lane3 PHY_TYPE_USB3 1 2 26000000>; ... } Requir ...
- hadop-eclipse-plugin导入plugins后没有mapreduce视图
这种现象一般由于安装在eclipse\plugins下的插件没有导入的问题. 解决方法:把 eclipse\configuration\org.eclipse.update 删除掉.出现这种情况的原因 ...
- 【神经网络与深度学习】Caffe部署中的几个train-test-solver-prototxt-deploy等说明
1:神经网络中,我们通过最小化神经网络来训练网络,所以在训练时最后一层是损失函数层(LOSS), 在测试时我们通过准确率来评价该网络的优劣,因此最后一层是准确率层(ACCURACY). 但是当我们真正 ...
- vue--过滤器(私有，全局)
过滤器 概念:Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化.过滤器可以用在两个地方:mustache 插值和 v-bind 表达式.过滤器应该被添加在 JavaScript 表达式的 ...
- [Python3] 027 常用模块 time
目录 time 1. 时间戳 2. UTC 时间 3. 夏令时 4. 时间元组 5. 举例 5.1 例子1 例子2 例子3 例子4 例子5 例子6 例子7 time 1. 时间戳 一个时间表示,根据不 ...
- java操作ElasticSearch（es）进行增删查改操作
有时间是要了解一下ES这个东西的~ ---------------------------------------------------------------------------------- ...
- UDP协议&socketserver模块
UDP协议&socketserver模块 一.UDP协议 1.1 UDP实现简单通信 服务器 ------------------------------------------------- ...