關於js鼠標事件綜合各大瀏覽器能獲取到坐標的屬性總共以下五種
- event.clientX/Y
- event.pageX/Y
- event.offsetX/Y
- event.layerX/Y
- event.screenX/Y
clientX/Y:
clientX/Y獲取到的是觸發點相對瀏覽器可視區域左上角距離，不隨頁面滾動而改變
兼容性：所有瀏覽器均支持
pageX/Y:
pageX/Y獲取到的是觸發點相對文檔區域左上角距離，會隨着頁面滾動而改變
設置<body style="width:2000px;height:200px;">讓頁面滾動，發現clientX與pageX的值不一樣
兼容性：除IE6/7/8不支持外，其余瀏覽器均支持
offsetX/Y:
offsetX/Y獲取到是觸發點相對被觸發dom的左上角距離，不過左上角基准點在不同瀏覽器中有區別，其中在IE中以內容區左上角為基准點不包括邊框，如果觸發點在邊框上會返回負值，而chrome中以邊框左上角為基准點。
兼容性：IE所有版本，chrome，Safari均完美支持，Firefox不支持
layerX/Y:
layerX/Y獲取到的是觸發點相對被觸發dom左上角的距離，數值與offsetX/Y相同，這個變量就是firefox用來替代offsetX/Y的，基准點為邊框左上角，但是有個條件就是，被觸發的dom需要設置為position:relative或者position:absolute，否則會返回相對html文檔區域左上角的距離
兼容性：IE6/7/8不支持，opera不支持，IE9/10和Chrome、Safari均支持
screenX/Y:
screenX/Y獲取到的是觸發點相對顯示器屏幕左上角的距離，不隨頁面滾動而改變
兼容性：所有瀏覽器均支持
/*我測試的clientX ，pageX代碼*/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;} #wrap{ margin:30px auto; width:500px; height:200px; border:1px solid #ccc; text-align: center; overflow: scroll; } #wrap p{ display: block; height:400px; } </style> </head> <body style="height:2000px; width:20000px"> <div id="wrap"> <p>測試pageX和clientX的區別</p> </div> <script> window.onload=function(){ var oDiv = document.getElementById('wrap'); oDiv.onclick = function(e){ e = e || window.event; console.log('e.clientX:'+e.clientX); console.log('e.pageX:'+e.pageX); } } </script> </body> </html>