快捷導(dǎo)航

JavaScript獲取鼠標(biāo)移動(dòng)時(shí)的坐標(biāo)(兼容IE8、chome谷歌、Firefox)

更新時(shí)間：2014年09月13日 13:49:42 投稿：mdxy-dxy

這篇文章主要介紹了JavaScript獲取鼠標(biāo)移動(dòng)時(shí)的坐標(biāo)(兼容IE8、chome谷歌、Firefox瀏覽器),需要的朋友可以參考下

JavaScript獲取鼠標(biāo)移動(dòng)時(shí)的坐標(biāo)(兼容:IE8、谷歌、Firefox、Opera )，測(cè)試通過(guò)

直接復(fù)制成html文件，即可運(yùn)行。

為方便大家測(cè)試特準(zhǔn)備了一份在線演示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>JavaScript獲取鼠標(biāo)移動(dòng)時(shí)的坐標(biāo)(兼容:IE8、谷歌、Firefox、Opera)_腳本之家</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style type="text/css"> 
.tip { 
width:200px; 
border:2px solid #ddd; 
padding:8px; 
background:#f1f1f1; 
color:#666; 
} 
</style> 
<script type="text/javascript"> 
 
//方法1 
function mousePos(e){ 
  var x,y; 
  var e = e||window.event; 
  return { 
    x:e.clientX+document.body.scrollLeft + document.documentElement.scrollLeft, 
    y:e.clientY+document.body.scrollTop + document.documentElement.scrollTop 
  }; 
}; 
 
//方法2 
//Firefox支持屬性pageX,與pageY屬性，這兩個(gè)屬性已經(jīng)把頁(yè)面滾動(dòng)計(jì)算在內(nèi)了, 
//在Chrome可以通過(guò)document.body.scrollLeft，document.body.scrollTop計(jì)算出頁(yè)面滾動(dòng)位移， 
//而在IE下可以通過(guò)document.documentElement.scrollLeft ，document.documentElement.scrollTop 
function getMousePos(event) { 
      var e = event || window.event; 
      var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; 
      var scrollY = document.documentElement.scrollTop || document.body.scrollTop; 
      var x = e.pageX || e.clientX + scrollX; 
      var y = e.pageY || e.clientY + scrollY; 
      //alert('x: ' + x + '\ny: ' + y); 
      return { 'x': x, 'y': y }; 
    } 
 
function test(e){ 
document.getElementById("mjs").innerHTML = getMousePos(e).x+','+getMousePos(e).y;   
}; 
</script> 
</head> 
<body> 
<div id="mjs" class="tip">獲取鼠標(biāo)點(diǎn)擊位置坐標(biāo)</div> 
<div id="test" style="width:1000px;height:1000px;background:#ccc;" onmousemove="test(event)"></div> 
</body> 
</html>

您可能感興趣的文章:

相關(guān)文章

利用js+css+html實(shí)現(xiàn)固定table的列頭不動(dòng)
本文分享了利用js+css+html實(shí)現(xiàn)固定table的列頭不動(dòng)的實(shí)例代碼。小編認(rèn)為具有很好的參考價(jià)值，感興趣的朋友可以看下
2016-12-12
微信公眾號(hào)錄音文件的播放與保存(amr文件轉(zhuǎn)mp3)
本文主要介紹了微信公眾號(hào)錄音文件的播放與保存(amr文件轉(zhuǎn)mp3)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
詳談innerHTML innerText的使用和區(qū)別
下面小編就為大家?guī)?lái)一篇詳談innerHTML innerText的使用和區(qū)別。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
js最實(shí)用string(字符串)類型的使用及截取與拼接詳解
這篇文章主要介紹了js string使用截取與拼接，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
如何用JS將base64圖片壓縮至指定大小
在開發(fā)中通常在上傳圖片時(shí),由于各種限制,需要將上傳的圖片壓縮到某一大小范圍內(nèi)才能上傳,這篇文章主要介紹了如何用JS將base64圖片壓縮至指定大小的相關(guān)資料,需要的朋友可以參考下
2025-04-04
ES6中Set和Map數(shù)據(jù)結(jié)構(gòu)的簡(jiǎn)單講解
大家心里是否產(chǎn)生過(guò)這樣的疑問(wèn),JS中既然已經(jīng)有對(duì)象這種數(shù)據(jù)結(jié)構(gòu),我們?yōu)槭裁催€要再單獨(dú)去使用Set或者M(jìn)ap呢?下面這篇文章主要給大家介紹了關(guān)于ES6中Set和Map數(shù)據(jù)結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下
2022-08-08
Echarts自定義圖形的方法參考
在使用ECharts繪制折線圖時(shí),為了豐富圖表的視覺(jué)表達(dá),設(shè)計(jì)師們常常會(huì)為視圖搭配上不同的圖標(biāo),下面這篇文章主要給大家介紹了關(guān)于Echarts自定義圖形的方法參考,需要的朋友可以參考下
2023-02-02
BootStrap modal模態(tài)彈窗使用小結(jié)
這篇文章主要為大家詳細(xì)介紹了BootStrap modal模態(tài)彈窗使用小結(jié),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
JS 自定義帶默認(rèn)值的函數(shù)
今天與同事一起看了一個(gè)javscript定義函數(shù)問(wèn)題，如何在定義一個(gè)函數(shù)里給參數(shù)一個(gè)默認(rèn)值.
2011-07-07
TypeScript字符串的常用操作總結(jié)
這篇文章主要為大家詳細(xì)介紹了TypeScript中字符串的常用操作，例如substring、indexOf、slice、replace等，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-08-08