瀏覽器的滑鼠座標值獲取及pageX、clientX、screenX的差異
阿新 • • 發佈：2019-01-26
寫在前面
獲取方法比較簡單。重點在於理解三種值的實際意義。
程式碼
<p><strong>screen:</strong><span id="screen"></span></p>
<p><strong>client:</strong><span id="client"></span></p>
<p><strong>page:</strong><span id="page"></span></p 三個段落分別用來顯示其值。
$(document).ready(function () {
$(this).click(function (e) {
$("#screen").text("screenX:"+e.screenX+" screenY:"+e.screenY);
$("#client").text("clientX:"+e.clientX+" clientY:"+e.clientY);
$("#page").text("pageX:"+e.pageX+" pageY:"+e.pageY);
});
}); 當用戶在文文件中點選滑鼠時，觸發函式，從而將三種座標值顯示出來。
全文程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../lib/jquery/jquery.js"></script>
</head>
<body>
<p><strong>screen:</strong 分析：當瀏覽器最大化即左側邊緣與螢幕左側貼合時，pageX、clientX、screenX的值都是一樣的。否則，screenX的值會比其他兩個值大，這個差值正好是瀏覽器左側邊緣到螢幕左側邊緣的距離。
而對於Y值，一般情況下，screenY的值都比其他兩個值大。這很好理解。在頁面全屏時，仍然大，不過只大了一個畫素值。當頁面在縱向沒有滾動條時，clientY與pageY的值是一樣的。當頁面向下滾動了一段距離時，pageY將比clientY的值大。因為，pageY是從文件的最上方開始計算，而clientY是滑鼠距離瀏覽器視窗最上方的距離，發生滾動時，clientY是不考慮滾進去的那段距離的。