【前端】screenX/Y, clientX/Y, pageX/Y 的区别

【【前端】screenX/Y, clientX/Y, pageX/Y 的区别】的更多相关文章

screenX、clientX、pageX的区别

screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点会随之滚动条的移动而移动. pageX:参照点也是浏览器内容区域的左上角,但它不会随着滚动条而变动. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org…

pageX/Y, offset(), position(), scrollTop(), screenX/Y, clientX/Y, pageX/Y

event.pageX get mouse position Description: The mouse position relative to the left edge of the document. Example <script> $(document).on( "mousemove", function( event ) { console.log( "pageX: " + event.pageX + ", pageY: &qu…

原生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不支持外,其余浏览器均支持 off…

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

clientX/Y: clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变兼容性:所有浏览器均支持 pageX/Y: pageX/Y获取到的是触发点相对文档区域左上角距离,会随着页面滚动而改变兼容性:除IE6/7/8不支持外,其余浏览器均支持 offsetX/Y: offsetX/Y获取到是触发点相对被触发dom的左上角距离,不过左上角基准点在不同浏览器中有区别,其中在IE中以内容区左上角为基准点不包括边框,如果触发点在边框上会返回负值,而chrome中以边框左…

原生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…

pagex/y offsetx/y screenx/y clientx/y 用法及区别

1 pagex/pagey:鼠标相对于整个页面的x/y坐标注:整个页面的意思就是你整个页面的全部例如:宽200px 高400px 那么pagex/y他们最大值就是它 2,offsetX/y与pageX/Y结果都一样,但是前者只有IE支持后者IE不支持 3,screenx/y 鼠标在屏幕上的坐标,最大值不会超过屏幕分辨率 4,clientX/y 事件发生时鼠标在浏览器内容区域的x/y坐标(不含滚动条),相对于可视区域的坐标注:滚动的时候看到的区域不算,当你将浏览器窗口缩小时,它们的最大值也…

clientX/Y pageX/Y offsetX/Y layerX/Y screenX/Y clientHeight innerWidth...

关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.screenX/Y screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点会随之滚动条的移动而移动. pageX:参照点也是浏览器内容区域的左上角,…