JS獲取鼠標位置距瀏覽器窗口距離的方法示例
更新時間：2017年04月11日 11:09:59 作者：布瑞澤的童話
這篇文章主要介紹了JS獲取鼠標位置距瀏覽器窗口距離的方法,結(jié)合實例形式分析了JS針對各種常見瀏覽器窗口及鼠標響應(yīng)操作相關(guān)技巧,需要的朋友可以參考下
本文實例講述了JS獲取鼠標位置距瀏覽器窗口距離的方法。分享給大家供大家參考，具體如下：
先來看看運行效果圖：
代碼如下：
<!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可以直接獲取滑動的距離。
PS：這里再為大家提供兩款在線參考表工具供大家開發(fā)過程中參考使用：
javascript事件與功能說明大全：
http://tools.jb51.net/table/javascript_event
鍵盤與鼠標按鍵的鍵值對照表：
http://tools.jb51.net/table/key_codes_num
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript窗口操作與技巧匯總》、《JavaScript中json操作技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
![Javascript驗證上傳圖片大小[前臺處理]](http://img.jbzj.com/images/xgimg/bcimg0.png)
在做上傳圖片的時候，如果不限制上傳圖片大小，后果非常的嚴重。解決這個問題有兩種方式：后臺處理、前臺處理2014-07-07
APP中javascript+css3實現(xiàn)下拉刷新效果
本文給大家分享的是如何在APP中使用javascript結(jié)合CSS3實現(xiàn)下拉刷新特效的代碼，非常的簡單實用，有需要的小伙伴可以參考下。2016-01-01
JavaScript模擬實現(xiàn)加入購物車飛入動畫效果
這篇文章主要為大家詳細介紹了如何使用JavaScript模擬實現(xiàn)加入購物車飛入動畫效果,文中的示例代碼講解詳細,有需要的小伙伴可以參考下2024-03-03
下面小編就為大家?guī)硪黄狫SON 對象未定義錯誤的解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
JavaScript實現(xiàn)異步獲取表單數(shù)據(jù)
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)異步獲取表單數(shù)據(jù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了微信小程序日歷插件代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-12-12
IE圖片緩存document.execCommand("BackgroundImageCache",
IE6下設(shè)置背景圖片是不會被真正cache住的，就算服務(wù)器做了cache，如果想cache住只能2011-03-03
Bootstrap每天必學之導(dǎo)航組件，制作面包屑式導(dǎo)航、導(dǎo)航加下拉菜單效果，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要介紹了淺談javascript原型鏈與繼承的相關(guān)資料,需要的朋友可以參考下2015-07-07
這篇文章給大家介紹了bootstrap table支持高度百分比的實例代碼，通過更改BootstrapTable.prototype.resetView 方法，以支持高度百分比定義，適應(yīng)不同高度屏幕，感興趣的朋友跟隨腳本之家小編一起學習吧2018-02-02