快捷導(dǎo)航

JavaScript實(shí)現(xiàn)捕獲鼠標(biāo)坐標(biāo)

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>事件對(duì)象</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的兼容性問(wèn)題
    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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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