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) })