javascript獲取滑鼠指標在整個頁面中的座標位置
本章節分享一段程式碼例項,它實現了能夠獲取滑鼠座標在整個頁面中的座標。
這個座標也包括滾動條部分的尺寸,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{ margin:0px; padding:0px; } body{height:1500px;} #antzone{ width:200px; height:200px; background-color:#ccc; margin:0px auto; position:fixed; left:50%; top:100px; margin-left:-100px; text-align:center; } #show{ width:150px; margin:0px auto; } </style> <script type="text/javascript"> window.onload=function(){ var odiv=document.getElementById("antzone"); function getX(ev) { var ev = ev || window.event; return ev.pageX || ev.clientX + document.body.scrollLeft; } function getY(ev) { var ev = ev || window.event; return ev.pageY || ev.clientY + document.body.scrollTop; } odiv.onmousemove=function(ev){ var ev=window.event||ev; this.innerHTML="X:"+getX(ev)+" Y:"+getY(ev)+""; } } </script> </head> <body> <div id="antzone"></div> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).window.onload=function(){},當文件內容完全載入完畢再去執行函式中的程式碼。
(2).var odiv=document.getElementById("antzone"),獲取id屬性值為antzone的元素物件。
(3).function getX(ev){},此方法可以獲取滑鼠指標的水平座標位置,引數是事件物件。
(4).var ev = ev || window.event,相容所有瀏覽器的事件物件。
(5).return ev.pageX || ev.clientX + document.body.scrollLeft,如果瀏覽器支援pageX屬性,則直接使用此屬性,否則就使用在客戶區的座標再加上向左滾動的尺寸。
二.相關閱讀:
(1).var ev = ev || window.event可以參閱var ev=window.event||ev的作用是什麼一章節。
(2).clientX屬性可以參閱javascript clientX一章節。
(3).scrollLeft屬性可以參閱js scrollLeft一章節。
相關文章
- JavaScript-滑鼠獲取頁面座標JavaScript
- JavaScript 獲取div在頁面中座標JavaScript
- JavaScript獲取滑鼠在文件中座標JavaScript
- JavaScript獲取滑鼠在元素中的座標JavaScript
- 透過滑鼠事件獲取滑鼠位置在3d中的座標mouse/Raycaster事件3DAST
- JavaScript獲取元素在文件中座標JavaScript
- 使用js獲取滑鼠座標JS
- Java 獲取Excel分頁座標位置(單元格)JavaExcel
- javascript頁面元素座標JavaScript
- 物體物件在螢幕中的座標及滑鼠座標物件
- Java 獲取Excel中圖片所在的行、列座標位置JavaExcel
- 百度地圖:根據位置獲取座標地圖
- getBoundingClientRect方法獲取元素在頁面中的相對位置GCclient
- C#/VB.NET 獲取Excel中圖片所在的行、列座標位置C#Excel
- input 獲取游標位置與設定游標位置
- JavaScript獲取元素在陣列中的位置JavaScript陣列
- 觸控事件獲取座標事件
- Android日常學習:如何高效 & 正確地獲取View的座標位置?AndroidView
- 如何用jst獲取DOM元素在頁面中的絕對位置?JS
- iOS 頁面起始座標的變化iOS
- win10怎麼調整滑鼠指標_win10怎麼更改滑鼠指標圖案Win10指標
- Vue中使用MouseMove事件 獲取滑鼠座標頻率降低或事件卡頓Vue事件
- HTML網頁根據座標模擬滑鼠點選HTML網頁
- JavaScript 空間座標JavaScript
- 獲取資料庫中到指定經緯度距離的座標資料庫
- dotnet 在 UNO 裡獲取 X11 視窗指標的方法指標
- CSS自定義滑鼠指標CSS指標
- ifccolumn在空間中的座標計算
- 【CSS: cursor】滑鼠游標指標樣式大全CSS指標
- fedora系統怎麼設定滑鼠指標大小?fedora滑鼠指標設定大小的教程指標
- win10滑鼠指標美化設定在哪 修改滑鼠指標樣式的具體方法Win10指標
- WPF如何得到一個在使用者控制元件內部的元素的座標位置控制元件
- 用 js 獲取頁面元素的位置圖文總結JS
- win10好看的滑鼠指標怎麼設定 win10好看的滑鼠指標如何美化Win10指標
- win10滑鼠指標怎麼隱藏 win10隱藏滑鼠指標的步驟Win10指標
- ArcGIS API for JavaScript根據兩個點座標在地圖上畫線APIJavaScript地圖
- JavaScript 獲取指定標籤一級子元素JavaScript
- win10 怎麼改變滑鼠指標_怎樣修改Windows10系統的滑鼠指標Win10指標Windows
- JavaScript(1)之——this指標JavaScript指標