javascript獲取當(dāng)前鼠標(biāo)坐標(biāo)的方法

更新時(shí)間：2015年01月10日 11:48:08 投稿：shichen2014

這篇文章主要介紹了javascript獲取當(dāng)前鼠標(biāo)坐標(biāo)的方法,可針對不同瀏覽器獲取鼠標(biāo)的坐標(biāo)位置,是非常實(shí)用技巧,需要的朋友可以參考下

本文實(shí)例講述了javascript獲取當(dāng)前鼠標(biāo)坐標(biāo)的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

對于javascript獲取當(dāng)前鼠標(biāo)坐標(biāo)來說，得對不同瀏覽器的坐標(biāo)位置有所了解。具體代碼如下：

<html>

<head>

<title>javascript獲取當(dāng)前鼠標(biāo)坐標(biāo)</title>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<script type="text/javascript">

 function mousePosition(ev){

  if(ev.pageX || ev.pageY){//firefox、chrome等瀏覽器

   return {x:ev.pageX,y:ev.pageY};

  }

  return {// IE瀏覽器

   x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,

   y:ev.clientY + document.body.scrollTop - document.body.clientTop

  };

 }

 function mouseMove(ev){

  ev = ev || window.event;

  var mousePos = mousePosition(ev);

  document.getElementById('x').innerHTML = mousePos.x;

  document.getElementById('y').innerHTML = mousePos.y;

 }

 document.onmousemove = mouseMove;

</script>

<style type="text/css">

h3{color:blue;}

p{line-height:30px;height:30px;font-size:14px;width:500px;}

span{color:orange;font-weight:bold;}

</style>

</head>

<body>

 <h3>您的鼠標(biāo)已經(jīng)被跟蹤</h3>

 <p> X 軸坐標(biāo)：<span id="x"></span></p>

 <p> Y 軸坐標(biāo)：<span id="y"></span></p>

</body>

</html>

希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

省市聯(lián)動(dòng)效果的簡單實(shí)現(xiàn)代碼(推薦)
下面小編就為大家?guī)硪黄∈新?lián)動(dòng)效果的簡單實(shí)現(xiàn)代碼(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-06-06
JavaScript ECMA-262-3 深入解析.第三章.this
在這篇文章里，我們將討論跟執(zhí)行上下文直接相關(guān)的更多細(xì)節(jié)。討論的主題就是this關(guān)鍵字
2011-09-09
微信小程序適配iphoneX的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序適配iphoneX的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
js實(shí)現(xiàn)網(wǎng)頁五子棋進(jìn)階版
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)網(wǎng)頁五子棋進(jìn)階版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
js匿名函數(shù)的調(diào)用示例(形式多種多樣)
匿名函數(shù)就是沒有實(shí)際名字的函數(shù)，javaScript的匿名函數(shù)形式多樣，下面就一一為大家羅列出來
2014-08-08
Object.defineProperty()?完整指南示例詳解
本文深入理解`Object.defineProperty()`的方法,包括基礎(chǔ)概念、屬性描述符的完整選項(xiàng)、常見使用場景等,感興趣的朋友跟隨小編一起看看吧
2025-01-01
javascript使用switch case實(shí)現(xiàn)動(dòng)態(tài)改變超級鏈接文字及地址
這篇文章主要介紹了javascript使用switch case實(shí)現(xiàn)動(dòng)態(tài)改變超級鏈接文字及地址,需要的朋友可以參考下
2014-12-12
一篇文章帶你吃透JavaScript中的DOM知識(shí)及用法
DOM作用:用來修改網(wǎng)頁內(nèi)容,結(jié)構(gòu)和樣式,下面這篇文章主要給大家介紹了關(guān)于如何通過一篇文章帶你吃透JavaScript中的DOM知識(shí)及用法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
typescript使用 ?. ?? ??= 運(yùn)算符的方法步驟
本文主要介紹了typescript使用 ?. ?? ??= 運(yùn)算符的方法步驟,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-01-01
解決layui動(dòng)態(tài)添加的元素click等事件觸發(fā)不了的問題
今天小編就為大家分享一篇解決layui動(dòng)態(tài)添加的元素click等事件觸發(fā)不了的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09