JavaScript實現(xiàn)捕獲鼠標坐標

更新時間：2020年04月12日 11:51:44 作者：TomHe789

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)捕獲鼠標坐標，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)捕獲鼠標坐標的具體代碼，供大家參考，具體內容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>事件對象</title>
 <style>
  .box1{
   width: 300px;
   height: 100px;
   border: 1px solid #000;
  }
  .box2 {
   width: 150px;
   height: 50px;
   border: 1px solid #000;
   margin-top: 50px;
   padding-top: 10px;
   box-sizing: border-box;
   text-align: center;
  }
 </style>
 <script>
  window.onload = function () {
   var box1 = document.getElementsByTagName("div")[0];
   var box2 = document.getElementsByTagName("div")[1];
   box1.onmousemove = function (event) {
    // 解決IE的兼容性問題
    event = event || window.event;
    box2.innerHTML = "X:" + event.clientX + " Y: " + event.clientY;
   }
  };
 </script>
</head>
<body>
 <div class="box1"></div>
 <div class="box2"></div>
</body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

JavaScript生成二維碼圖片小結
現(xiàn)如今，二維碼無處不在，掃一掃送抽紙，那么基于js二維碼是如何生成的呢？面對這一問題，下面小編給分享一代碼介紹javascript生成二維碼圖片小結，感興趣的朋友一起學習吧
2015-12-12
JavaScript常用腳本匯總（三）
本文給大家分享的常用腳本有通過數(shù)組，拓展字符串拼接容易導致性能的問題、頁面視口滾動條的位置的輔助函數(shù)、調節(jié)元素透明度的函數(shù)、獲取鼠標位置的幾個通用的函數(shù)、使用cssdisplay屬性來切換元素可見性的一組函數(shù)、樣式相關的通用函數(shù)、獲取元素當前的高度和寬度。
2015-03-03
捕獲關閉窗口的腳本
對于需要獲取一個窗口關閉后的返回信息時，需要用的到。
2009-01-01
教你用幾十行js實現(xiàn)很炫的canvas交互特效
HTML5中的大部分動畫都是通過Canvas實現(xiàn),因為Canvas就像一塊畫布,我們可以通過調用腳本在Canvas上繪制任意形狀,甚至是制作動畫,這篇文章主要給大家介紹了關于用幾十行js實現(xiàn)很炫的canvas交互特效的相關資料,需要的朋友可以參考下
2021-11-11
小程序實現(xiàn)錄音上傳功能
這篇文章主要為大家詳細介紹了小程序實現(xiàn)錄音上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-11-11
javascript正則表達式使用replace()替換手機號的方法
這篇文章主要介紹了javascript正則表達式使用replace()替換手機號的方法,可實現(xiàn)把手機號第4位到第7位替換成****的功能,是非常實用的技巧,需要的朋友可以參考下
2015-01-01
javascript 判斷一個對象為數(shù)組的方法
這篇文章主要介紹了javascript 判斷一個對象為數(shù)組的方法的相關資料,需要的朋友可以參考下
2017-05-05
javascript 獲取元素樣式必殺技
這篇文章主要介紹了javascript 獲取元素樣式必殺技,需要的朋友可以參考下
2014-05-05
基于JS實現(xiàn)快速讀取TXT文件
這篇文章主要介紹了基于JS實現(xiàn)快速讀取TXT文件,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-08-08
Express無法通過req.body獲取請求傳遞的數(shù)據(jù)解決方法
這篇文章主要為大家介紹了Express無法通過req.body獲取請求傳遞的數(shù)據(jù)解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-12-12