在頁面中js獲取光標(biāo)/鼠標(biāo)的坐標(biāo)及光標(biāo)的像素坐標(biāo)
更新時(shí)間：2013年11月11日 11:33:27 作者：
頁面JS光標(biāo)/鼠標(biāo)坐標(biāo)，百度統(tǒng)計(jì)中有個(gè)熱點(diǎn)統(tǒng)計(jì)圖，我們要做的就是獲取光標(biāo)的像素坐標(biāo)
近期為網(wǎng)站開發(fā)頁面統(tǒng)計(jì)，以前雖然也開發(fā)過，但是功能不是很全，所以這次把一些好功能給用上。
例如這次的，頁面JS光標(biāo)/鼠標(biāo)坐標(biāo)，你也許問著有什么用，百度統(tǒng)計(jì)中有個(gè)熱點(diǎn)統(tǒng)計(jì)圖，這下清楚明白了吧。
好了，上肉：
功能：獲取光標(biāo)的像素坐標(biāo)
<html>
<head>
<script type="text/javascript">
function showPosition(e){
var x,y;
var e = e||window.event;
document.getElementById("x").value = e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;
document.getElementById("y").value = e.clientY+document.body.scrollTop+document.documentElement.scrollTop
}
</script>
</head>
<body>
<div onmousemove="showPosition(event);" style="height:100%; width:100%;">
x:<input id="x" type="text" value="" />
y:<input id="y" type="text" value="" />
</div>
</body>
</html>
例如這次的，頁面JS光標(biāo)/鼠標(biāo)坐標(biāo)，你也許問著有什么用，百度統(tǒng)計(jì)中有個(gè)熱點(diǎn)統(tǒng)計(jì)圖，這下清楚明白了吧。
好了，上肉：
功能：獲取光標(biāo)的像素坐標(biāo)
復(fù)制代碼 代碼如下:
<html>
<head>
<script type="text/javascript">
function showPosition(e){
var x,y;
var e = e||window.event;
document.getElementById("x").value = e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;
document.getElementById("y").value = e.clientY+document.body.scrollTop+document.documentElement.scrollTop
}
</script>
</head>
<body>
<div onmousemove="showPosition(event);" style="height:100%; width:100%;">
x:<input id="x" type="text" value="" />
y:<input id="y" type="text" value="" />
</div>
</body>
</html>
相關(guān)文章
讓網(wǎng)站自動(dòng)生成章節(jié)目錄索引的多個(gè)js代碼
這篇文章主要介紹了讓博客園博客自動(dòng)生成章節(jié)目錄索引的多個(gè)js代碼,需要的朋友可以參考下2018-01-01
JavaScript如何一次性展示幾萬條數(shù)據(jù)
本文主要介紹了JavaScript一次性展示幾萬條數(shù)據(jù)的實(shí)現(xiàn)方法。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03
JavaScript實(shí)現(xiàn)秒殺時(shí)鐘倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)秒殺時(shí)鐘倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
區(qū)分JS中的undefined,null,"",0和false
區(qū)分JS中的undefined,null,"",0和false...2007-03-03
JavaScript隨機(jī)數(shù)的組合問題案例分析
這篇文章主要介紹了JavaScript隨機(jī)數(shù)的組合問題,結(jié)合具體案例形式分析了JavaScript隨機(jī)數(shù)的組合問題相關(guān)算法原理、實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2020-05-05
最近接了個(gè)項(xiàng)目，項(xiàng)目需求是：手機(jī)通過WIFI連接上網(wǎng)，而老板要求，員工使用手機(jī)只能上微信，而不能上其他網(wǎng)頁和看在線視頻。下面通過本文給大家分享微信端口及協(xié)議分析，感興趣的朋友一起看看吧2016-11-11
下面小編就為大家?guī)硪黄狫avaScript正則表達(dá)式-非捕獲性分組。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了JavaScript模擬數(shù)組合并concat的相關(guān)資料,需要的朋友可以參考下2016-03-03
javascript實(shí)現(xiàn)抽獎(jiǎng)程序的簡單實(shí)例
下面小編就為大家?guī)硪黄猨avascript實(shí)現(xiàn)抽獎(jiǎng)程序的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
javascript 事件綁定的一些兼容寫法整理非常不錯(cuò)，感謝2009-12-12