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)位置有所了解。具體代碼如下：
復(fù)制代碼 代碼如下:
<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>
<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)文章
這篇文章主要給大家介紹了關(guān)于js中typeof用法的相關(guān)資料,typeof運(yùn)算符把類型信息當(dāng)作字符串返回,包括有大家常有變量類型,本文通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-11-11
js實(shí)現(xiàn)獲取最新本周周一開始的日期（單周日歷卡）
這篇文章主要為大家介紹了js實(shí)現(xiàn)獲取最新本周周一開始的日期（單周日歷卡）示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-10-10
js打印紙函數(shù)代碼，獲取并設(shè)置打印紙的具體信息的代碼，需要的朋友可以參考下。2010-06-06
js實(shí)現(xiàn)簡單的抽獎(jiǎng)系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡單的抽獎(jiǎng)系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)時(shí)間軸特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
PHP自動(dòng)加載autoload和命名空間的應(yīng)用小結(jié)
PHP的自動(dòng)加載就是我們加載實(shí)例化類的時(shí)候，不需要手動(dòng)去寫require來導(dǎo)入這個(gè)class.php文件，程序自動(dòng)幫我們加載導(dǎo)入進(jìn)來這.篇文章主要介紹了PHP自動(dòng)加載autoload和命名空的應(yīng)用,需要的朋友可以參考下2017-12-12
JavaScript數(shù)據(jù)類型轉(zhuǎn)換簡單方法舉例
JavaScript是一種無類型語言，但同時(shí)JavaScript提供了一種靈活的自動(dòng)類型轉(zhuǎn)換的處理方式,下面這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)據(jù)類型轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下2023-12-12
利用JS實(shí)現(xiàn)點(diǎn)擊按鈕后圖片自動(dòng)切換的簡單方法
下面小編就為大家?guī)硪黄肑S實(shí)現(xiàn)點(diǎn)擊按鈕后圖片自動(dòng)切換的簡單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
JS動(dòng)態(tài)添加與刪除select中的Option對象(示例代碼)
本篇文章主要介紹了JS動(dòng)態(tài)添加與刪除select中的Option對象(示例代碼) 需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
微信小程序?qū)崿F(xiàn)簡單input正則表達(dá)式驗(yàn)證功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)簡單input正則表達(dá)式驗(yàn)證功能,結(jié)合實(shí)例形式分析了微信小程序input組件事件綁定及正則驗(yàn)證相關(guān)操作技巧,需要的朋友可以參考下2017-11-11