在頁面中js獲取光標(biāo)/鼠標(biāo)的坐標(biāo)及光標(biāo)的像素坐標(biāo)
更新時間：2013年11月11日 11:33:27 作者：
頁面JS光標(biāo)/鼠標(biāo)坐標(biāo)，百度統(tǒng)計(jì)中有個熱點(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ì)中有個熱點(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ì)中有個熱點(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)文章
本篇文章主要介紹了webpack的配置文件entry與output，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了JS按回車鍵實(shí)現(xiàn)登錄的方法,在web程序設(shè)計(jì)中非常實(shí)用的技巧,可用于表單提交的情況,具有很好的用戶體驗(yàn),需要的朋友可以參考下2014-08-08
ES6中javascript實(shí)現(xiàn)函數(shù)綁定及類的事件綁定功能詳解
這篇文章主要介紹了ES6中javascript實(shí)現(xiàn)函數(shù)綁定及類的事件綁定功能,結(jié)合實(shí)例形式分析了ES6中函數(shù)綁定及類的事件綁定原理、實(shí)現(xiàn)方法、相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2017-11-11
js導(dǎo)出table到excel同時兼容FF和IE示例
js導(dǎo)出table到excel，在百度可以搜索很多的方法，但是其兼容性是相當(dāng)差的，本文制定了一個可以同時兼容FF和IE的方法，感興趣的朋友可以參考下2013-09-09
IE下Ajax緩存問題的快速解決方法(get方式)。網(wǎng)上搜了很多解決方案，一大把，下面是我認(rèn)為比較全面的解決方案。主要分為客戶端解決和服務(wù)端解決2014-01-01
這篇文章主要介紹了JavaScript三大變量聲明詳析,三大變量聲明主要包括var、const和let，下面文章我們就圍繞三者展開詳細(xì)內(nèi)容介紹，需要的朋友可以參考一下2022-06-06
JS實(shí)現(xiàn)在Repeater控件中創(chuàng)建可隱藏區(qū)域的代碼
在WEB應(yīng)用中，如何才能使應(yīng)用高效率呢?如何才能吸引用戶呢?這的確是個大學(xué)問,頁面的內(nèi)容,色搭配等都十分重要。但不可忽視的是,多數(shù)情況下，對于數(shù)據(jù)的呈現(xiàn)方式也是十分重要的。2010-09-09
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)滑動輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
等號和非等號的同類運(yùn)算符是全等號和非全等號。這兩個運(yùn)算符所做的與等號和非等號相同，只是它們在檢查相等性前，不執(zhí)行類型轉(zhuǎn)換。接下來通過本文給大家介紹JS中的全等和不全等、等于和不等于，一起看看吧2021-09-09
這篇文章主要介紹了javascript中this用法,結(jié)合具體實(shí)例形式詳細(xì)分析了javascript中this的含義及對象、函數(shù)等各種調(diào)用中的使用技巧,需要的朋友可以參考下2017-04-04