jq和js用mousemove獲取滑鼠當前位置
阿新 • • 發佈：2019-02-13
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>jq獲取滑鼠的位置</title> <style> div{ width: 500px; height: 500px; background-color: #585858; margin: 0; padding: 0; } </style> <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script> </head> <body> <div id="d"> </div> </body> <script type="text/javascript"> $('#d').mousemove(function(f){ /* var xx = f.originalEvent.x|| f.originalEvent.layerX||0; var yy = f.originalEvent.y|| f.originalEvent.layerY||0;*/var xx = f.pageX; var yy = f.pageY; $(this).text(xx+','+yy); }) /*根據出現的“originalEvent”一詞可猜測題主的本意是比較jquery下 e.pageX和e.originalEvent.x的區別（因為originalEvent是jq在對構造一個jq版e物件後引用的原始e物件）。 根據jq原始碼，jq版e物件下的pageX和原生的pageX是一致的，但是增加了對舊版本IE的實現部分。 於是題目可蛻化為原生e.pageX與e.x的區別，以及jq為IE8-瀏覽器實現的e.pageX與原生e.x的區別。 考慮jq的跨平臺特性，我們在不清楚具體情況的時候，直接通過其補丁的實現方式來猜測屬性的定義。 根據jq對無原生pageX的瀏覽器的補丁實現 event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft || body && body.clientLeft || 0 ); 到這裡我們已經基本清楚pageX的涵義，是包含了滾動條的計算的。 實際上，e.pageX在各（支援的）瀏覽器下的表現都是一致的，都是表達點選位置相對於整個文件的位置，用題主的話說就是“計算了滾動條”。 相容性來說，e.pageX除了在IE系列中低於IE9的版本中是不支援的，IE9+和其它主流瀏覽器全部一致支援。 可是e.x的情況很複雜…… 首先，fx不支援e.x。這沒啥好說的。 其次，除IE外的其它主流瀏覽器，opera、chrome（以及其它同核心的瀏覽器），都支援e.x屬性, 其值為“相對可視區域的座標”——沒錯，對它們來說，e.x == e.clientX。用題主的話說就是“沒有計算滾動條”。 再來看看e.x屬性的發明者IE。IE全系列支援e.x 被點選物件所在的座標系（即最近一個指定position: relative的tag的左上角的border外邊界為原點）的座標位置。 如果自身及上層均沒有指定position: relative屬性，則蛻變為相對於“相對可視區域的座標”。 題外話，通過F12發現，IE一旦涉及滾動條後計算居然不是整畫素數，而是會出現誤差小數的！*/ </script> </html> <!--<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>javascript獲得滑鼠位置</title> </head> <body> <script> function mouseMove(ev) { Ev= ev || window.event; var mousePos = mouseCoords(ev); document.getElementById("xxx").value = mousePos.x; document.getElementById("yyy").value = mousePos.y; } function mouseCoords(ev) { if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return{ x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } document.onmousemove = mouseMove; </script> 滑鼠X軸: <input id=xxx type=text> 滑鼠Y軸: <input id=yyy type=text> </body> -->