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 ...
随机推荐
- Spliterator介绍
一.Spliterator Spliterator<T> trySplit();trySplit接口就相当于我们之前写的AccumulatorRecursiveTask类里面的分割任务,如 ...
- wpf passwordbox控件 光标移到最后
/// <summary> /// 设置光标位置 /// </summary> /// <param name="passwordBox">&l ...
- windows10上同时安装py2和py3的情况
2018-06-14 16:14:51 1.同时安装python2和python3的时候,pip只是其中一个版本,使用对应Python版本的pip时,在命令行分别输入如下命令: 查看不同Python ...
- hadop-eclipse-plugin导入plugins后没有mapreduce视图
这种现象一般由于安装在eclipse\plugins下的插件没有导入的问题. 解决方法:把 eclipse\configuration\org.eclipse.update 删除掉.出现这种情况的原因 ...
- python_面试题_TCP的三次握手与四次挥手问题
1.相关问题 问题1: 请详细描述三次握手和四次挥手的过程,并画出状态图 问题2: 四次挥手中TIME_WAIT状态存在的目的是什么? 问题3: TCP是通过什么机制保障可靠性的? 2.问题回答 问题 ...
- 【HTTP】二、HTTP协议的报文结构
HTTP有两类报文:请求报文和响应报文,由于 HTTP 是面向正文的(text-oriented),因此在报文中的每一个字段都是一些 ASCII码串,因而每个字段的长度都是不确定的.(HTTP2引 ...
- python 并发编程 多线程 信号量
一 信号量 信号量也是一把锁,可以指定信号量为5,对比互斥锁同一时间只能有一个任务抢到锁去执行,信号量同一时间可以有5个任务拿到锁去执行 如果说互斥锁是合租房屋的人去抢一个厕所,那么信号量就相当于一群 ...
- ArrayList和LinkedList的底层代码实现思想
ArrayList是Java众多集合类中的一个,实现List接口,List的父接口是Collection.ArrayList底层的数据结构是线性表中的顺序表,底层是一个长度可以动态增长的数组.数组有很 ...
- HDU 2094 产生冠军(STL map)
产生冠军 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- 配置Bean的作用域
一.Spring中Bean的5个作用域 在Spring 2.0及之后的版本中,Bean的作用域被划分为5种.如下 singleton 默认值.以单例模式创建Bean的实例,即容器中该Bean的实例只 ...