clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 详解

clientX/Y:

clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变

兼容性:所有浏览器均支持

pageX/Y:

pageX/Y获取到的是触发点相对文档区域左上角距离,会随着页面滚动而改变

兼容性:除IE6/7/8不支持外,其余浏览器均支持

offsetX/Y:

offsetX/Y获取到是触发点相对被触发dom的左上角距离,不过左上角基准点在不同浏览器中有区别,其中在IE中以内容区左上角为基准点不包括边框,如果触发点在边框上会返回负值,而chrome中以边框左上角为基准点。

兼容性:IE所有版本,chrome,Safari均完美支持,Firefox不支持

layerX/Y:

layerX/Y获取到的是触发点相对被触发dom左上角的距离,数值与offsetX/Y相同,这个变量就是firefox用来替代offsetX/Y的,基准点为边框左上角,但是有个条件就是,被触发的dom需要设置为position:relative或者position:absolute,否则会返回相对html文档区域左上角的距离

兼容性:IE6/7/8不支持,opera不支持,IE9/10和Chrome、Safari均支持

screenX/Y:

screenX/Y获取到的是触发点相对显示器屏幕左上角的距离,不随页面滚动而改变

兼容性:所有浏览器均支持

时间: 2024-12-27 20:20:30

clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 详解的相关文章

JavaScript 中一些概念理解 :clientX、clientY、offsetX、offsetY、screenX、screenY

clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条. offsetX 设置或获取鼠标指针位置相对于触发事件的(this)对象的 x 坐标. offsetY 设置或获取鼠标指针位置相对于触发事件的(this)对象的 y 坐标. screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标. screenY 设置或获取鼠

原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y

简介 关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种: event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.screenX/Y clientX/Y: clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变 兼容性:所有浏览器均支持 pageX/Y: pageX/Y获取到的是触发点相对文档区域左上角距离,会随着页面滚动而改变 兼容性:除IE6/7/8不支持外,其余浏览器均支持

clientX/Y pageX/Y offsetX/Y layerX/Y screenX/Y

关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.screenX/Y clientX/Y: clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变 兼容性:所有浏览器均支持 pageX/Y: pageX/Y获取到的是触发点相对文档区域左上角距离,会随着页面滚动而改变 兼容性:除IE6/7/8不支持外,其余浏览器均支持 off

pageX、clientX、screenX、offsetX、layerX、x

e.pageXe.layerXe.offsetXe.clientXe.x 属性: 测试浏览器: FF9/Chrome15/opera11.52/safari5(win)/IE6/7/8/9 测试代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htm

定义一个复数(z=x+iy)类Complex,包含: 两个属性:实部x和虚部y 默认构造函数 Complex(),设置x=0,y=0 构造函数:Complex(int i,int j) 显示复数的方法:showComp()将其显示为如: 5+8i或5-8i 的形式。 求两个复数的和的方法:(参数是两个复数类对象,返回值是复数类对象)public Complex addComp(Compl

因标题框有限,题目未显示完整,以下再放一份: 定义一个复数(z=x+iy)类Complex,包含: 两个属性:实部x和虚部y 默认构造函数 Complex(),设置x=0,y=0 构造函数:Complex(int i,int j) 显示复数的方法:showComp()将其显示为如: 5+8i或5-8i 的形式. 求两个复数的和的方法:(参数是两个复数类对象,返回值是复数类对象)public Complex addComp(Complex C1,Complex C2) 求两个复数的差的方法:(参数

关于offsetX,clientX,pageX,offsetHeight,clientHeight ,scrollHeightX的区别

一.关于offsetX,clientX,pageX,scrollX的区别 offsetX表示点击点到所点击物体左边距的距离: clientX表示点击点到浏览器左边的距离,该点击点会随着滚动条的移动而发生变化: pageX表示点击点到浏览器左边的距离,但点击点不会因滚动条的移动而变化: scrollX表示点击点到屏幕左边的距离 二.关于offsetHeight,clientHeight ,scrollHeight的区别 clientHeight:内容可视区域的高度,也就是说页面浏览器中可以看到内容

What is the difference between screenX/Y, clientX/

In JavaScript: pageX, pageY, screenX, screenY, clientX and clientY returns a number which indicates the number of physical "css pixels" a point is from the reference point. The event point is where the user clicked, the reference point is a poin

201510150049_《JavaScript——clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别》

screenX:鼠标在显示屏幕上的坐标. clientX:鼠标在页面显示区域的坐标.(FF是pageX;) pageX:... ... layerX:FF特有,父容器border的左上角... ...(可用offsetX代替) offsetX:IE特有;鼠标距离“触发事件元素位置”距离... ... offsetLeft:非事件属性,而是Dom对象属性,表示“该dom在另外一个dom中的位置”... ...

Oracle数据库中NUMBER(x,y)数据类型详解

试验准备 分析并实验 1 小数部分的处理 2 可保存的最大值 3可以保存的最小值 总结 Oracle的NUMBER数据类型表示十进制的数字,分别从整数位个数和小数位个数进行限制.我们以NUMBER(8,2)为例进行分析. 1 试验准备 建立一个只有一列的表,NUMBER(8,2)表示数字总个数最多为8,小数部分最多2位(推算出整数部分最多8-2=6位). create table t1 (c1 number(8,2)); 2 分析并实验 2.1 小数部分的处理 小数部分代表着精确程度,NUMBE