【clientX,screenX,pageX,offsetX的异同】的更多相关文章

clientX,screenX,pageX,offsetX的异同 【转载】

首先说明一下以上对象都是指javascript中的,不包含其他语言. pageX/pageY: 鼠标相对于整个页面的X/Y坐标.注意,整个页面的意思就是你整个网页的全部,比如说网页很宽很长,宽2000px,高3000px,那pageX,pageY的最大值就是它们了. 特别说明:IE不支持! offsetX/offsetY: 得出的结果跟pageX/pageY一样,既然如此,它有什么存在价值?因为: 特别说明:只有IE支持!相当于IE下的pageX,pageY. screenX/screenY:…

clientX,screenX,pageX,offsetX的异同

pageX/pageY: 鼠标相对于整个页面的X/Y坐标.注意,整个页面的意思就是你整个网页的全部,比如说网页很宽很长,宽2000px,高3000px,那pageX,pageY的最大值就是它们了. 特别说明:IE不支持! offsetX/offsetY: 得出的结果跟pageX/pageY一样,既然如此,它有什么存在价值?因为: 特别说明:只有IE支持!相当于IE下的pageX,pageY. clientX/clientY: 事件发生时鼠标在浏览器内容区域的X/Y坐标(不包含滚动条).浏览器内容…

javascript 中 x offsetX clientX screenX pageX的区别

在javascript的事件对象中的关于事件鼠标位置的几个属性(x, pageX, offsetX, scrrenX clientX)及(y, pageY, offsetY, screenY, clientY), 其中offsetX, offsetY是指相对于触发事件元素的左上角的偏移.但在不同的浏览器中其值又有所不同.在chrome opera, safari中是指外边缘,即把该元素边框的宽度计算在内,firefox ie则不包含边框值.如下图(一个具有蓝色边框的div)所示. layerX…

pageX、clientX、screenX、offsetX、layerX、x

参考:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome: e.pageX--相对整个页面的坐标e.layerX--相对当前坐标系的border左上角开始的坐标e.offsetX--相对当前坐标系的border左上角开始的坐标e.clientX--相对可视区域的坐标e.x--相对可视区域的坐标 ff: e.pageX--相对整个页面的坐标e.layerX--相对当前坐标系的border左上角开始的坐标e.offs…

一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别

总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀....) 先总结下区别: event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event.pageX.event.pageY 类似于event.clientX.event.clientY,但它们使用的是文档坐标而非…

【转】pageX、clientX、screenX、offsetX、layerX、x

参考:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome: e.pageX——相对整个页面的坐标e.layerX——相对当前坐标系的border左上角开始的坐标e.offsetX——相对当前坐标系的border左上角开始的坐标e.clientX——相对可视区域的坐标e.x——相对可视区域的坐标 ff: e.pageX——相对整个页面的坐标e.layerX——相对当前坐标系的border左上角开始的坐标e.offs…

原生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获取到的是触发点相对文档区域左上角距离,会随着页面滚动而改变 设置<body  style="width:2000…

event对象的clientX,offsetX,screenX,pageX

chrome: e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clientX——相对可视区域的坐标 e.x——相对可视区域的坐标 ff: e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——无 e.clientX——相对可视区域的坐标 e.x——无 opera: e.pageX——相对整个页面的…

[转]pageX、clientX、screenX、offsetX、layerX、x

参考:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome: e.pageX——相对整个页面的坐标e.layerX——相对当前坐标系的border左上角开始的坐标e.offsetX——相对当前坐标系的border左上角开始的坐标e.clientX——相对可视区域的坐标e.x——相对可视区域的坐标 ff: e.pageX——相对整个页面的坐标e.layerX——相对当前坐标系的border左上角开始的坐标e.offs…

JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别

首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性. 之前也一直对这些属性搞的稀里糊涂,看文档上说的也是不太理解,反正看完一头雾水,所以自己动手亲自测试了一下:说一下自己的理解:clientX,clientY,screenX,screenY,offsetX,offsetY 这几个属性是“鼠标事件对象”下的属性,所以必然是“鼠标事件”发生时候才会有意义: clientX:当鼠标事件发生时(不管是onclick,还是…