JS獲取鼠標(biāo)位置距瀏覽器窗口距離的方法示例

更新時間：2017年04月11日 11:09:59 作者：布瑞澤的童話

這篇文章主要介紹了JS獲取鼠標(biāo)位置距瀏覽器窗口距離的方法,結(jié)合實例形式分析了JS針對各種常見瀏覽器窗口及鼠標(biāo)響應(yīng)操作相關(guān)技巧,需要的朋友可以參考下

本文實例講述了JS獲取鼠標(biāo)位置距瀏覽器窗口距離的方法。分享給大家供大家參考，具體如下：

先來看看運行效果圖：

代碼如下：

<!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

鍵盤與鼠標(biāo)按鍵的鍵值對照表：
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ù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS解決移動web開發(fā)手機輸入框彈出的問題
在移動web開發(fā)中和pc端不同的是，手機的輸入是軟鍵盤，這樣就會有個問題，那就是當(dāng)有輸入的時候，鍵盤彈起來，整個頁面難免會發(fā)生變化。怎么解決這個問題呢？下面腳本之家小編給大家分享JS解決移動web開發(fā)手機輸入框彈出的問題
2017-03-03
微信小程序?qū)崿F(xiàn)留言板
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)留言板，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-10-10
7. Microsoft Online-Crash Control, version 6.0(微軟在線崩潰控件)
7. Microsoft Online-Crash Control, version 6.0(微軟在線崩潰控件)...
2007-08-08
刷新頁面后讓控制臺的js代碼繼續(xù)執(zhí)行
這篇文章主要介紹了刷新頁面后讓控制臺的js代碼繼續(xù)執(zhí)行，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-09-09
JavaScript實現(xiàn)倒計時跳轉(zhuǎn)頁面功能【實用】
本文分享了JavaScript實現(xiàn)倒計時跳轉(zhuǎn)頁面功能的具體實例代碼，頁面代碼簡單，直接拷貝就能運行，頁面可以自己美化下哦。需要的朋友一起來看下吧
2016-12-12
微信小程序?qū)崿F(xiàn)購物車小功能
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)購物車小功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
js實現(xiàn)在網(wǎng)頁上簡單顯示時間的方法
這篇文章主要介紹了js實現(xiàn)在網(wǎng)頁上簡單顯示時間的方法,實例分析了javascript實時顯示時間的技巧,需要的朋友可以參考下
2015-03-03
js實現(xiàn)彈窗暗層效果
本文主要分享了js實現(xiàn)彈窗暗層效果的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧
2017-01-01
JavaScript ES6中CLASS的使用詳解
class是es6引入的最重要特性之一。在沒有class之前，我們只能通過原型鏈來模擬類。這篇文章我們將詳細的介紹關(guān)于ES6中CLASS的使用，有需要的朋友們可以參考借鑒，下面來一起看看吧。
2016-11-11
JS定時器實例詳細分析
在javascritp中，有兩個關(guān)于定時器的專用函數(shù)，下面講解一下兩個定時器，有需要的朋友可以參考一下
2013-10-10