clientX和clientY与x,y一样的,以浏览器显示区域的左上角开始,指鼠标的坐标。x,y是新浏览器支持 offsetX,offsetY,针对目标元素的左上角坐标,从padding开始。 layerX,layerY,往上找有定位属性的父元素的左上角(自身有定位属性的话就是相对于自身),都没有的话,就是相对于body的左上角 pageX,pageY相对页面左...
pageX:鼠标点击位置相对于网页左上角的水平偏移量,也就是clientX加上水平滚动条的距离 pageY:鼠标点击位置相对于网页左上角的垂直平偏移量,也就是clientY加上垂直滚动条的距离 4、offsetX和offsetY offsetX:鼠标点击位置相对于触发事件对象的水平距离 offsetY:鼠标点击位置相对于触发事件对象的垂直距离 Top~~ event....
clientX和 clientY 是可视区域的 x,y的坐标, 以浏览器左上角的x,y为起点为坐标系计算 image.png image.png offsetX、offsetY 事件触发相对于当前元素自身的位置的x,y坐标 image.png screenX、screenY 距离当前电脑屏幕的x,y坐标 (屏幕分辨率的宽度计算) image.png pageX、pageY 是相对于整个页面来说,包括了...
JS获取页面坐标数据 1.client系列 event.clientX 和 event.clientY:点击位置距离当前body可视区域的x,y坐标 2.screen系列 event.screenX 和 event.screenY: 点击位置距离当前电脑屏幕的x,y坐标 3.offset系列 eve
clientX/Y clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变。 兼容性:所有浏览器均支持 pageX/Y pageX/Y获取到的是触发点相对文档区域左上角距离,会随着页面滚动而改变 兼容性:除IE6/7/8不支持外,其余浏览器均支持 offsetX/Y ...
style.width/style.height与scrollWidth/scrollHeight是可读写的属性,clientWidth/clientHeight与offsetWidth/offsetHeight是只读属性 style.width的值需要事先定义,否则取到的值为空。而且必须要定义在html里(内联样式),如果定义在css里,style.height的值仍然为空,但元素偏移有效;而offsetWidth则仍能取到。
clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变。 pageX/Y pageX/Y获取到的是触发点相对文档区域左上角距离,会随着页面滚动而改变 offsetX/Y offsetX/Y获取到是触发点相对被触发dom的左上角距离,不过左上角基准点在不同浏览器中有区别,其中在IE中以内容区左上角为基准点不包括边...
clientX/Y clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变。 兼容性:所有浏览器均支持 pageX/Y pageX/Y获取到的是触发点相对文档区域左上角距离,会随着页面滚动而改变 兼容性:除IE6/7/8不支持外,其余浏览器均支持 offsetX/Y ...
} } 二、不同浏览器对这些属性的支持: 三、图解 event.offsetX,event.clientX,event.pageX,event.screenX属性 四、图解 event.layerX,event.layerY 属性 五、图解 event.layerX,event.layerY 属性
pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化. offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上...