JavaScript mousemove 事件

admin發表於2018-11-16
JavaScript事件

滑鼠指標在元素上移動時，觸發此事件。

關於事件處理函式註冊，可以參閱如何註冊事件處理函式一章節。

瀏覽器支援:

（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:100px;
  height:100px;
  background-color:green; 
} 
</style> 
<script> 
window.onload=function(){ 
  let odiv=document.getElementById("ant"); 
  let ospan=document.getElementById("show"); 
  odiv.onmousemove=function(ev){ 
    let oEvent=ev||event;  
    ospan.innerHTML="座標值:X:"+oEvent.clientX+" Y:"+oEvent.clientY 
  } 
} 
</script> 
</head> 
<body> 
<div id="ant"></div> 
<span id="show"></span> 
</body> 
</html>

當在div中移動滑鼠的時候，會將滑鼠指標的當前座標顯示在span元素中。

相關文章