javascript 中 x offsetX clientX screenX pageX的區別
在javascript的事件對象中的關於事件鼠標位置的幾個屬性(x, pageX, offsetX, scrrenX clientX)及(y, pageY, offsetY, screenY, clientY),
其中offsetX, offsetY是指相對於觸發事件元素的左上角的偏移。但在不同的瀏覽器中其值又有所不同。在chrome opera, safari中是指外邊緣,即把該元素邊框的寬度計算在內,firefox ie則不包含邊框值。如下圖(一個具有藍色邊框的div)所示。
layerX layerY
layerX layerY是相對於position為absolute或relative的父元素胡外邊緣的距離。ie8及ie8之前的版本沒有layerX或layerY值。
如下圖:最外層是一個綠色邊框的div,裏面一層是一個紅色邊框的div, 最裏面是一個藍色邊框的div, 在藍色div上單擊,則該事件的layerX與layerY相相對於最外層綠色外邊緣的距離(中間紅色的div的position設有被設置為absolute或relative, 所有不是相對該元素,反之則是相對於該元素)。
pageX, pageY, x, y, clientX, clientY
pageX, pageY是相對於文檔窗口的左上角,x,y和clientX, clientY相同,其值是相對於可視窗口(瀏覽的可視區域)的左上角。如下圖。
此時可視窗口與文檔窗口重疊,pageX等於clientX, pageY等於clientY, 如果我們縮小瀏覽器窗口直到瀏覽器出現滾動條。此時可視窗口左上角位置不變,但文檔窗口左上角位置發生的變化,如下圖:
由此我們可以看出當瀏覽器沒有滾動條時(可視窗口與文檔窗口重合),pageX與clientX相等,pageX與clientY相等,如果出現下拉滾動條並向下拉動滾動條,文檔窗口向上滾動,如果出現左右滑動的滾動條並向右拉動滾動條,文檔窗口向左滾動,在文檔窗口滾動的情況下,pageX>=clientX, pageY>=clientY, x = clientX, y = clientY。
原文地址:https://blog.csdn.net/yang_chuanlong/article/details/49232945
javascript 中 x offsetX clientX screenX pageX的區別