JavaScript event.clientX

admin發表於2019-03-24
JavaScriptclient

理解一個屬性的功能可以從其名稱入手，clientX屬性也不例外。

此屬性屬於事件物件，可以在事件處理函式內部使用，更多內容參閱JavaScript 事件物件一章節。

clientX由client和x結合而成，client翻譯成漢語具有客戶區的意思，x則表示座標系的x軸。

要徹底理解此屬性，需要首先明確如下兩個概念：

（1）.client客戶區。

（2）.客戶區的座標系。

一.client客戶區：

為了通俗易懂，我們可以用如下方式理解客戶區。

所謂客戶區，瀏覽器提供給瀏覽者（客戶）檢視網頁內容的區域。

也就是瀏覽器實際展示網頁內容的區域，不包括位址列，標籤欄或者狀態列等區域。

簡單圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201903/24/132908hfnr58tfgy18rr11.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面是火狐瀏覽器下的一個介面，灰色區域就是瀏覽器客戶區，只有這個區域才算是瀏覽器客戶區。

也就是瀏覽器所真正呈現網頁內容的區域，瀏覽器的標籤欄和位址列等都不是。

二.客戶區座標系：

客戶區座標系與傳統意義上的數學座標系有所差別。

原點位置在客戶區的左上角，水平向左是x軸正方向，垂直向下是y軸正方向。

傳統意義上的數學座標系y軸垂直向上是正，恰好相反。

為了更好的理解，下面用比較粗陋的圖示簡單進行一下說明：

a:3:{s:3:\"pic\";s:43:\"portal/201903/24/133002h1q20ggr8q2g1z22.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

三.屬性概念：

event.clientX屬性返回滑鼠指標在瀏覽器客戶區x軸方向座標。

返回值是一個數字不帶單位，預設單位是畫素。

與此屬性相對應的是event.clientY，獲取在客戶區y軸的座標，原理一模一樣。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
event.clientX

瀏覽器支援：

（1）.IE瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.火狐瀏覽器支援此屬性。

（4）.Opera瀏覽器支援此屬性。

（5）.谷歌瀏覽器支援此屬性。

（6）.safria瀏覽器支援此屬性。

例項程式碼：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{
  height:1000px;
}
#ant{
  width:100px;
  height:100px;
  background-color:green;
  margin:50px;
}
span{margin-left:50px;}
</style>
<script>
window.onload=function(){
  let odiv = document.getElementById("ant");
  let ospan = document.getElementById("span");
  odiv.onmousemove = function(ev) {
    let event=ev||event; 
    ospan.innerHTML = "座標值:X:" + event.clientX + " Y:" + event.clientY;
  }
}
</script>
</head>
<body>
<div id="ant"></div>
<span id="span"></span>
</body>
</html>

滑鼠在綠色div中移動，會將其在客戶區中的座標寫入span元素，簡單程式碼說明如下：

為綠色div元素註冊mousemove事件處理函式，當滑鼠在此div中移動時，可以將滑鼠指標的座標寫入span。

這裡一定要注意的是，獲取的座標點是在客戶區中的座標位置，而不是在綠色div中的座標位置。

程式碼比較簡單，本文不再進行多餘的介紹，更多內容可以參閱如下幾篇文章：

（1）.mousemove事件可以參閱JavaScript mousemove 事件一章節。

（2）.innerHTML 屬性參閱JavaScript innerHTML一章節。

（3）註冊事件處理函式參閱JavaScript 註冊事件處理函式一章節。.

相關文章