js 獲取坐標 通過JS得到當前焦點(鼠標)的坐標屬性
更新時間：2013年01月04日 10:35:56 作者：
通過JS得到當前焦點的坐標,如何實現(xiàn)，接下來詳細介紹實現(xiàn)步驟，有需要的朋友可以參考下
通過JS得到當前焦點的坐標
如下是得到當前焦點的坐標：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta name="auther" content="fq" />
<title>獲取鼠標坐標</title>
</head>
<body>
<script type="text/javascript">
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
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('xxx').value = mousePos.x;
document.getElementById('yyy').value = mousePos.y;
}
document.onmousemove = mouseMove;
</script>
X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" />
</body>
</html>
如下是得到當前焦點的坐標：
復制代碼 代碼如下:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta name="auther" content="fq" />
<title>獲取鼠標坐標</title>
</head>
<body>
<script type="text/javascript">
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
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('xxx').value = mousePos.x;
document.getElementById('yyy').value = mousePos.y;
}
document.onmousemove = mouseMove;
</script>
X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" />
</body>
</html>
相關文章
Javascript類定義語法,私有成員、受保護成員、靜態(tài)成員等介紹
JS只是一門支持面向對象編程的語言，通過OO可以讓我們的代碼組織更加人性化。可是與傳統(tǒng)基與類的面向對編程語言不同它沒有類概念并且沒成員訪問修飾符。這多少會給我們編程工作會帶來一些束縛2011-12-12
filters.revealTrans.Transition使用方法小結
有看到幻燈片調用會用到divid.filters.revealTrans.Transition=Math.floor(Math.random()*23)和divid.filters.revealTrans.apply(),那么這兩個都是什么意思呢?2010-08-08
這篇文章主要介紹了JS截取字符串的方法,結合實例形式較為詳細的分析了JavaScript截取字符串的常用函數(shù)與具體使用技巧,并附帶說明了JS截取字符串substr和substring方法的區(qū)別,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了javscript 數(shù)組扁平化的實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
下面小編就為大家?guī)硪黄獪\談js中同名函數(shù)和同名變量的執(zhí)行問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了bootstrap實現(xiàn)每隔5秒自動輪播效果，可以自己設置輪播間隔時間，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
全局數(shù)據(jù)共享是為了解決組件之間數(shù)據(jù)共享的問題,下面這篇文章主要給大家介紹了關于微信小程序全局數(shù)據(jù)共享和分包的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
js鼠標經(jīng)過tab選項卡時實現(xiàn)切換延遲
這篇文章主要為大家詳細介紹了js鼠標經(jīng)過tab選項卡時實現(xiàn)切換延遲效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
彈出新的網(wǎng)頁窗口的方法有很多，在本文為大家介紹下使用js的window.open方法來實現(xiàn)，需要的朋友可以了解下2014-01-01
使用JSX 建立 Markup 組件風格開發(fā)的示例（前端組件化）
這篇文章主要介紹了使用JSX 建立 Markup 組件風格開發(fā)的示例（前端組件化）本文重點講解如何從0搭建一個組件系統(tǒng)，在這里我們會學習使用JSX來建立markup 的風格，我們基于與React 一樣的 JSX 去建立我們組件的風格2021-04-04