js 獲取坐標(biāo) 通過JS得到當(dāng)前焦點(diǎn)(鼠標(biāo))的坐標(biāo)屬性
更新時(shí)間:2013年01月04日 10:35:56 作者:
通過JS得到當(dāng)前焦點(diǎn)的坐標(biāo),如何實(shí)現(xiàn),接下來詳細(xì)介紹實(shí)現(xiàn)步驟,有需要的朋友可以參考下
通過JS得到當(dāng)前焦點(diǎn)的坐標(biāo)
如下是得到當(dāng)前焦點(diǎn)的坐標(biāo):
<!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>獲取鼠標(biāo)坐標(biāo)</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>
如下是得到當(dāng)前焦點(diǎn)的坐標(biāo):
復(fù)制代碼 代碼如下:
<!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>獲取鼠標(biāo)坐標(biāo)</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>
您可能感興趣的文章:
- js與jquery中獲取當(dāng)前鼠標(biāo)的x、y坐標(biāo)位置的代碼
- 基于JavaScript實(shí)現(xiàn) 獲取鼠標(biāo)點(diǎn)擊位置坐標(biāo)的方法
- JavaScript獲取鼠標(biāo)坐標(biāo)的函數(shù)(兼容IE、FireFox、Chrome)
- js獲得鼠標(biāo)的坐標(biāo)值的方法
- 通過百度地圖獲取公交線路的站點(diǎn)坐標(biāo)的js代碼
- javascript 事件對(duì)象 坐標(biāo)事件說明
- js Event對(duì)象的5種坐標(biāo)
- 通過JS 獲取Mouse Position(鼠標(biāo)坐標(biāo))的代碼
- JavaScript獲取鼠標(biāo)移動(dòng)時(shí)的坐標(biāo)(兼容IE8、chome谷歌、Firefox)
- JavaScript實(shí)現(xiàn)二維坐標(biāo)點(diǎn)排序效果
相關(guān)文章
Javascript類定義語法,私有成員、受保護(hù)成員、靜態(tài)成員等介紹
JS只是一門支持面向?qū)ο缶幊痰恼Z言,通過OO可以讓我們的代碼組織更加人性化??墒桥c傳統(tǒng)基與類的面向?qū)幊陶Z言不同它沒有類概念并且沒成員訪問修飾符。這多少會(huì)給我們編程工作會(huì)帶來一些束縛2011-12-12filters.revealTrans.Transition使用方法小結(jié)
有看到幻燈片調(diào)用會(huì)用到divid.filters.revealTrans.Transition=Math.floor(Math.random()*23)和divid.filters.revealTrans.apply(),那么這兩個(gè)都是什么意思呢?2010-08-08javscript 數(shù)組扁平化的實(shí)現(xiàn)
這篇文章主要介紹了javscript 數(shù)組扁平化的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02bootstrap實(shí)現(xiàn)每隔5秒自動(dòng)輪播效果
這篇文章主要介紹了bootstrap實(shí)現(xiàn)每隔5秒自動(dòng)輪播效果,可以自己設(shè)置輪播間隔時(shí)間,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12微信小程序全局?jǐn)?shù)據(jù)共享和分包圖文詳解
全局?jǐn)?shù)據(jù)共享是為了解決組件之間數(shù)據(jù)共享的問題,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局?jǐn)?shù)據(jù)共享和分包的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09js鼠標(biāo)經(jīng)過tab選項(xiàng)卡時(shí)實(shí)現(xiàn)切換延遲
這篇文章主要為大家詳細(xì)介紹了js鼠標(biāo)經(jīng)過tab選項(xiàng)卡時(shí)實(shí)現(xiàn)切換延遲效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03使用JSX 建立 Markup 組件風(fēng)格開發(fā)的示例(前端組件化)
這篇文章主要介紹了使用JSX 建立 Markup 組件風(fēng)格開發(fā)的示例(前端組件化)本文重點(diǎn)講解如何從0搭建一個(gè)組件系統(tǒng),在這里我們會(huì)學(xué)習(xí)使用JSX來建立markup 的風(fēng)格,我們基于與React 一樣的 JSX 去建立我們組件的風(fēng)格2021-04-04