html5 offsetx,event对象中offsetX,clientX,pageX,screenX的区别

1、offsetX

offset意为偏移量,是事件对象距左上角为参考原点的距离。以元素盒子模型的内容区域的左上角为参考点。不包括border。

2、clientX

事件对象相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条

3、pageX

事件对象相对于整个文档的坐标以像素为单位.

4、screenX

事件对象相对于设备屏幕的左上角的坐标,当改变屏幕的分辨率的时候,坐标会随之改变.

以上除了screenX/Y以设备像素为单位，其他都是以css像素为单位

下面以一个实例来解释说明

Title

html,body{

margin: 0 auto;

padding: 0;

}

#canvas{

border:20px solid blue;

margin-left: 300px;

}

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.οnmοusedοwn=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);

}

当没有滚动条的时候,pageX==clientX,offsetX=pageX+(margin-left)+border

当有滚动条的时候,pageX!=clientX

html5 offsetx,event对象中offsetX,clientX,pageX,screenX的区别相关推荐

区分event对象中的[clientX,offsetX,screenX,pageX]
前言在平时的开发中,非常讨厌的就是兼容性了,兼容性的问题总会让我们记忆混淆,所以这次来区分一下event对象中的常用获取鼠标位置. clientX clientY event.clientX eve ...
一张图看懂offsetX, clientX, pageX, screenX的区别
1.具体含义见下图1 2.浏览器的兼任情况更多专业前端知识,请上 [猿2048]www.mk2048.com
Js event对象offsetX, clientX, pageX, screenX, layerX, x区别（图解）
简介因为实际开发中,很少用到event对象的这几个值,每当写的时候又记不清,然后就要浪费时间去查找准确的资料,很是不爽,所以就做个记录~话不多说,直接上图(ps:图是网上找的,如果侵权,可立马删除) ...
event对象的offsetX, clientX, pageX, screenX
现在需要对event对象的几大与坐标有关的属性做一个总结,以便于认识 offsetX|offsetY offsetX/Y获取到是触发点相对被触发dom的左上角距离(包括padding在内,不包括bor ...
图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
通过 3 张图和 1 张表格,轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: & ...
java中id name_关于DOM对象中的id与name的区别
例1: value="admin"> id="un" name="username" value="silas"& ...
event对象的offsetX、clientX、pageX、screenX及 window.innerWidth、outerWidth使用详解
目录 offset client screen page window.innerWidht offset offsetX.offsetY为当前鼠标点击位置距离当前元素参考原点(左上角)的距离,而不同 ...
clientX,pageX,screenX，offsetLeft，scrollTop
这个东西,以为理解了,今天彻底弄弄. clientX 观点:鼠标相对于WINDOWS的坐标. 这里这个WINDOWS是指我们能看见的浏览器大小.所以不可能超过显示器的大小,如 screen.width ...
前端：JS/28/CSS DOM动态样式（style对象，style 对象属性与CSS属性的转换），Event DOM，事件对象简介（DOM和IE中的Event对象），实例：点出满天小星星
CSS DOM动态样式使用JS操作CSS中的各个属性: JS只能操作或修改行内样式,如:imgObjstyle.border = "1px solid red"; 对于类样式,通 ...

html5 offsetx,event对象中offsetX,clientX,pageX,screenX的区别

html5 offsetx,event对象中offsetX,clientX,pageX,screenX的区别相关推荐

最新文章

热门文章