javascript獲取滑鼠座標pageX和clientX的區別
阿新 • • 發佈：2019-01-27
這兩種獲取滑鼠座標的方法，區別在於基於的物件不同：
pageX和pageY獲取的是滑鼠指標距離文件（HTML）的左上角距離，不會隨著滾動條滾動而改變；
clientX和clientY獲取的是滑鼠指標距離可視視窗(不包括上面的位址列和滑動條)的距離，會隨著滾動條滾動而改變；
測試程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>測試pageX和clientX的區別</title> <style> *{margin:0;padding:0;} body { height:3000px; width:3600px; } #wrap{ margin:300px auto; width:500px; height:200px; border:1px solid red; text-align: center; overflow: scroll; } #wrap p{ height:400px; } </style> </head> <body> <div id="wrap"> <p>測試pageX和clientX的區別</p> </div> </body> <script> window.onload=function(){ var oDiv = document.getElementById('wrap'); oDiv.onmousemove = function(e){ e = e || window.event; console.log('e.clientX:'+e.clientX+" e.clientY:"+e.clientY); console.log('e.pageX:'+e.pageX+" e.pageY:"+e.pageY); } } </script> </html>