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

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

一、总结

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

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

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

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

但是pageY会随着滚动条的下拉而变大，因为它是距文件顶端的距离

 

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

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

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

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

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

但是pageY会随着滚动条的下拉而变大，因为它是距文件顶端的距离

 

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

page

 

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

screen

 

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

client

 

 

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

1、相关知识

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

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

 

2、代码

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