js进阶 12-7 pageY和screenY以及clientY的区别是什么

js进阶 12-7 pageY和screenY以及clientY的区别是什么

1、总结

一句话总结：pageY是距文件，screenY是获取显示器屏幕位置的坐标，clientY是页面视口。

没有滚动条时，(pageY=clientY)+浏览器菜单栏高度=screenY；

有滚动条时，pageY>screenY>clientY，

由于clientY是页面视图距离，有无滚动条时你点屏幕的同一位置不会变化，screenY也是。

可是pageY会随着滚动条的下拉而变大，由于它是距文件顶端的距离

 

一、pageY和screenY以及clientY的区别是什么？

pageY是距文件，screenY是获取显示器屏幕位置的坐标，clientY是页面视口。

没有滚动条时，(pageY=clientY)+浏览器菜单栏高度=screenY；

有滚动条时，pageY>screenY>clientY，

由于clientY是页面视图距离，有无滚动条时你点屏幕的同一位置不会变化，screenY也是。

可是pageY会随着滚动条的下拉而变大，由于它是距文件顶端的距离

 

二、jquery中用哪一个单词表示文档？

page

 

三、jquery中用哪一个单词表示屏幕？

screen

 

四、jquery中用哪一个单词表示可视区域？

client

 

 

2、pageY和screenY以及clientY的区别是什么

一、相关知识

event.pageX/event.pageY 显示鼠标相对于文件的左侧和顶部边缘的位置

注意区分：screenX/screenY：获取显示器屏幕位置的坐标；
clientX/clientY:获取相对于页面视口的坐标

 

二、代码

$(document).mousemove(function(e){ $('#xy').val('e.pageY:'+e.pageY+' '+'e.screenY:'+e.screenY+'e.clientY:'+e.clientY) })