JavaScript event.screenY

admin發表於2019-05-24
JavaScript

此事件屬性可返回事件發生時滑鼠指標相對於螢幕的垂直座標。

螢幕的左上角是座標系原點位置，向左是x軸正方向，向下是y軸正方向。

這裡一定要注意的是，此屬性返回的是相對於顯示器螢幕的座標，而不是瀏覽器客戶區。

簡單圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201905/24/101701az312vez35reafac.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

圖示說明如下：

（1）.藍色的是顯示器平臺木，我們獲取的就是滑鼠在此螢幕形成的座標系中的座標。

（2）.螢幕的左上角是座標系原點位置，向左是x軸正方向，向下是y軸正方向。

（3）.千萬不要誤解為獲取的是在瀏覽器中的座標。

此屬性與event.screenX相對應，具體參閱JavaScript event.screenX一章節。

語法結構：

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

瀏覽器支援:

（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"> 
#ant{ 
  width:200px; 
  height:200px; 
  background-color:green; 
  margin:0px auto; 
} 
</style> 
<script> 
window.onload=function(){ 
  var odiv = document.getElementById("ant");
  var ospan=document.getElementById("span"); 
  odiv.onmousemove = function zuobiao(event) {
    ospan.innerHTML = "座標值:X:" + event.screenX + " Y:" + event.screenY;
  } 
} 
</script> 
</head> 
<body style="text-align:center"> 
<div id="ant"></div> 
<span id="span"></span> 
</body> 
</html>

當在綠色div中移動滑鼠指標時候，會在span元素中實時顯示滑鼠指標在螢幕中的座標。

相關文章