【JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别】的更多相关文章

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

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

元素位置pageX,pageY,clientX,clientY,scrollX,scrollY,screenX,screenY,offsetX,offsetY

总结: event.clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. (可见区域)event.clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条. (可见区域)event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标. (触发事件的元素,ie,chrome支持此属性,ff不支持)event.offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y…

pageX，clientX，screenX，offsetX的区别

pageX/pageY: 鼠标相对于整个页面的X/Y坐标,但IE不支持.以body元素为参考点. clientX/clientY: 鼠标在浏览器内容区域的X/Y坐标,不包含滚动条,即需要滚动条的地方不算.浏览器窗口缩小时,clientX/clientY的最大值也会缩小.以浏览器左上角为参考点,所以不包括滚动距离. screenX/screenY: 鼠标在屏幕上的坐标,最大值不超过屏幕分辨率.以屏幕为参考点. offsetX/offsetY: 针对IE用的pageX/pageY. event.cl…

分清clientY pageY screenY layerY offsetY的区别

分清clientY pageY screenY layerY offsetY的区别 在我们想要做出拖拽这个效果的时候,我们需要分清这几个属性的区别,这几个属性都是计算鼠标点击的偏移值,我们需要对其进行了解才可以继续实现我们的拖拽效果 clientY 指的是距离可视页面左上角的距离pageY 指的是距离可视页面左上角的距离(不受页面滚动影响)screenY 指的是距离屏幕左上角的距离layerY 指的是找到它或它父级元素中最近具有定位的左上角距离offsetY 指的是距离它自己左上角的距离 原文地…

【js】clientY pageY screenY layerY offsetY的区别

clientY 指的是距离可视页面左上角的距离 pageY 指的是距离可视页面左上角的距离(不受页面滚动影响) screenY 指的是距离屏幕左上角的距离 layerY 指的是找到它或它父级元素中最近具有定位的左上角距离 offsetY 指的是距离它自己左上角的距离 一张图带大家简单了解了解 在我们简单了解完这些个属性以后,有几个属性需要分清.   相同点 不同点 clientY 距离页面左上角距离 受页面滚动的影响 pageY 距离页面左上角的距离 不受页面滚动影响   相同点 不同点 lay…

javascript中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX

原文:https://www.cnblogs.com/ifworld/p/7605954.html 元素宽高 offsetWidth //返回元素的宽度(包括元素宽度.内边距和边框,不包括外边距) offsetHeight //返回元素的高度(包括元素高度.内边距和边框,不包括外边距) clientWidth //返回元素的宽度(包括元素宽度.内边距,不包括边框和外边距) clientHeight //返回元素的高度(包括元素高度.内边距,不包括边框和外边距) style.width //返回元…

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…

【转】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…

[转]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…

clientX, clientY，offsetX, offsetY,screenX, screenY, x, y

clientX, clientY是鼠标当前相对于网页的位置,当鼠标位于页面左上角时clientX=0, clientY=0: offsetX, offsetY是鼠标当前相对于网页中的某一区域的位置,当鼠标位于页面中这一区域的左上角时offsetX=0, offsetY=0: screenX, screenY是相对于用户显示器的位置 x,y是鼠标相对于当前浏览器的位置 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&q…