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:1200px; } #antzone { width:100px; height:50px; position:fixed; top:50px; left:10px; background:#ccc; font-size:12px; text-align:center; } </style> <script> window.onload = function () { var odiv = document.getElementById("antzone"); document.onmousemove = function (ev) { var str = "橫座標:" + ev.pageX+"<br/>"; var str = str + "縱座標:" + ev.pageY; odiv.innerHTML = str; } } </script> </head> <body> <div id="antzone"></div> </body> </html>
上面的程式碼可以獲取滑鼠在文件中的座標。
但是程式碼有一個問題,那就是不相容IE9以下的瀏覽器,下面再分享一段程式碼例項,它實現了相容。
程式碼例項如下:
[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:1200px; } #antzone { width:100px; height:50px; position:fixed; top:50px; left:10px; background:#ccc; font-size:12px; text-align:center; } </style> <script> function mousePosition(ev) { if (!ev) ev = window.event; if (ev.pageX || ev.pageY) { return { x: ev.pageX, y: ev.pageY }; } return { x: ev.clientX + document.documentElement.scrollLeft - document.body.clientLeft, y: ev.clientY + document.documentElement.scrollTop - document.body.clientTop }; }; window.onload = function () { var odiv = document.getElementById("antzone"); document.onmousemove = function (ev) { var positionObj = mousePosition(ev); var str = "橫座標:" + positionObj.x + "<br/>"; var str = str + "縱座標:" + positionObj.y; odiv.innerHTML = str; } } </script> </head> <body> <div id="antzone"></div> </body> </html>
上面的程式碼實現了相容所有瀏覽器的功能,程式碼相對比較簡單。
相關閱讀:
(1).相容瀏覽器的事件物件參閱var ev=window.event||ev的作用是什麼一章節。
(2).clientX參閱JavaScript event.clientX屬性一章節。
(3).scrollLeft參閱JavaScript scrollLeft一章節。
(4).onmousemove事件參閱mouseleave事件一章節。
(5).innerHTML參閱innerHTML一章節。
相關文章
- javascript獲取滑鼠在網頁文件中的座標JavaScript網頁
- JavaScript獲取元素在文件中座標JavaScript
- JavaScript獲取滑鼠在元素中的座標JavaScript
- JavaScript獲取滑鼠座標JavaScript
- JavaScript 獲取滑鼠指標座標JavaScript指標
- JavaScript 獲取滑鼠指標的座標JavaScript指標
- javascript獲取滑鼠指標在整個頁面中的座標位置JavaScript指標
- JavaScript獲取滑鼠指標座標詳解JavaScript指標
- JavaScript-滑鼠獲取頁面座標JavaScript
- javascript獲取滑鼠在瀏覽器客戶區座標JavaScript瀏覽器
- JavaScript 獲取div在頁面中座標JavaScript
- jQuery獲取滑鼠指標座標jQuery指標
- js獲取滑鼠指標在顯示器螢幕中的座標JS指標
- js獲取滑鼠在頁面中的座標簡單介紹JS
- 滑鼠滑動獲取絕對座標方法 jqueryjQuery
- DataGridView通過滑鼠座標,獲取所在行索引View索引
- 設定元素在文件中的座標
- 獲取元素在頁面中的座標位置程式碼例項
- js獲取元素在頁面中的座標程式碼例項JS
- 觸控事件獲取座標事件
- Vue中使用MouseMove事件 獲取滑鼠座標頻率降低或事件卡頓Vue事件
- Java 獲取Excel中圖片所在的行、列座標位置JavaExcel
- JavaScript獲取元素在陣列中的位置JavaScript陣列
- JavaScript獲取元素標籤名JavaScript
- 獲取資料庫中到指定經緯度距離的座標資料庫
- JavaScript 空間座標JavaScript
- Java 獲取Excel分頁座標位置(單元格)JavaExcel
- Android獲取螢幕和控制元件座標Android控制元件
- js獲取div相對螢幕的座標位置JS
- 百度地圖:根據位置獲取座標地圖
- android獲得控制元件在螢幕中的絕對座標Android控制元件
- javascript如何獲取事件目標物件JavaScript事件物件
- JavaScript獲取li元素的下標JavaScript
- JavaScript獲取head標籤物件JavaScript物件
- GPS獲取座標 顯示Google map偏差計算Go
- javascript中獲取元素尺寸JavaScript
- javascript頁面元素座標JavaScript
- JQuery獲取滑鼠位置jQuery