JS獲取鼠標(biāo)位置距瀏覽器窗口距離的方法示例
本文實(shí)例講述了JS獲取鼠標(biāo)位置距瀏覽器窗口距離的方法。分享給大家供大家參考，具體如下：
先來(lái)看看運(yùn)行效果圖：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#test_div {
width:400px;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div id="test_div"></div>
</body>
<script type="text/javascript">
function mousePos(e){
e=e||window.event;
var scrollX=document.documentElement.scrollLeft||document.body.scrollLeft;//分別兼容ie和chrome
var scrollY=document.documentElement.scrollTop||document.body.scrollTop;
var x=e.pageX||(e.clientX+scrollX);//兼容火狐和其他瀏覽器
var y=e.pageY||(e.clientY+scrollY);
console.log(x,y);
return {x:x,y:y};
}
var test=document.querySelector("#test_div");
test.onclick=function(e){
mousePos(e);
}
</script>
</html>
其中的document.documentElement.scrollLeft和document.body.scrollLeft分別是ie和chrome的方法，而火狐中的pageX可以直接獲取滑動(dòng)的距離。
PS：這里再為大家提供兩款在線參考表工具供大家開(kāi)發(fā)過(guò)程中參考使用：
javascript事件與功能說(shuō)明大全：
http://tools.jb51.net/table/javascript_event
鍵盤(pán)與鼠標(biāo)按鍵的鍵值對(duì)照表：
http://tools.jb51.net/table/key_codes_num
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript窗口操作與技巧匯總》、《JavaScript中json操作技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- JavaScript offset實(shí)現(xiàn)鼠標(biāo)坐標(biāo)獲取和窗口內(nèi)模塊拖動(dòng)
- JS判斷鼠標(biāo)進(jìn)入容器的方向與window.open新窗口被攔截的問(wèn)題
- JS實(shí)現(xiàn)彈出浮動(dòng)窗口(支持鼠標(biāo)拖動(dòng)和關(guān)閉)實(shí)例詳解
- JS實(shí)現(xiàn)窗口加載時(shí)模擬鼠標(biāo)移動(dòng)的方法
- javascript窗口寬高,鼠標(biāo)位置,滾動(dòng)高度(詳細(xì)解析)
- JavaScript實(shí)現(xiàn)鼠標(biāo)控制自由移動(dòng)的窗口
相關(guān)文章
JS解決移動(dòng)web開(kāi)發(fā)手機(jī)輸入框彈出的問(wèn)題
在移動(dòng)web開(kāi)發(fā)中和pc端不同的是，手機(jī)的輸入是軟鍵盤(pán)，這樣就會(huì)有個(gè)問(wèn)題，那就是當(dāng)有輸入的時(shí)候，鍵盤(pán)彈起來(lái)，整個(gè)頁(yè)面難免會(huì)發(fā)生變化。怎么解決這個(gè)問(wèn)題呢？下面腳本之家小編給大家分享JS解決移動(dòng)web開(kāi)發(fā)手機(jī)輸入框彈出的問(wèn)題2017-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)留言板，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
7. Microsoft Online-Crash Control, version 6.0(微軟在線崩潰控件)
7. Microsoft Online-Crash Control, version 6.0(微軟在線崩潰控件)...2007-08-08
刷新頁(yè)面后讓控制臺(tái)的js代碼繼續(xù)執(zhí)行
這篇文章主要介紹了刷新頁(yè)面后讓控制臺(tái)的js代碼繼續(xù)執(zhí)行，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
JavaScript實(shí)現(xiàn)倒計(jì)時(shí)跳轉(zhuǎn)頁(yè)面功能【實(shí)用】
本文分享了JavaScript實(shí)現(xiàn)倒計(jì)時(shí)跳轉(zhuǎn)頁(yè)面功能的具體實(shí)例代碼，頁(yè)面代碼簡(jiǎn)單，直接拷貝就能運(yùn)行，頁(yè)面可以自己美化下哦。需要的朋友一起來(lái)看下吧2016-12-12
微信小程序?qū)崿F(xiàn)購(gòu)物車(chē)小功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)購(gòu)物車(chē)小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
js實(shí)現(xiàn)在網(wǎng)頁(yè)上簡(jiǎn)單顯示時(shí)間的方法
這篇文章主要介紹了js實(shí)現(xiàn)在網(wǎng)頁(yè)上簡(jiǎn)單顯示時(shí)間的方法,實(shí)例分析了javascript實(shí)時(shí)顯示時(shí)間的技巧,需要的朋友可以參考下2015-03-03
本文主要分享了js實(shí)現(xiàn)彈窗暗層效果的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
class是es6引入的最重要特性之一。在沒(méi)有class之前，我們只能通過(guò)原型鏈來(lái)模擬類(lèi)。這篇文章我們將詳細(xì)的介紹關(guān)于ES6中CLASS的使用，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-11-11
在javascritp中，有兩個(gè)關(guān)于定時(shí)器的專(zhuān)用函數(shù)，下面講解一下兩個(gè)定時(shí)器，有需要的朋友可以參考一下2013-10-10