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