通過 3 張圖和 1 張表格，輕鬆區別 JavaScript Event 對象中的offsetX, clientX, pageX, screenX, layerX, x等屬性。
一、測試代碼如下：
- <!DOCTYPE HTML>
- <html lang="zh-cn">
- <head>
- <meta charset="utf-8" />
- <title>Javascript</title>
- <style>
- body{margin:0;padding:0;background:#ccc;font-size:12px;overflow:auto}
- .main{width: 500px;height: 330px;position: relative;margin: 250px auto 0;background-color: #eee;}
- .box{position: absolute;width: 220px;height: 180px;background-color: orange;top: 80px;left: 80px;}
- </style>
- </head>
- <body style="height:1600px;">
- <div class="main">
- <div class="box" id="box"></div>
- </div>
- <script>
- var oBox = document.getElementById('box');
- window.onload = function(){
- oBox.onmousedown = function(ev){
- ev = ev || window.event;
- console.log(ev.offsetX, ev.offsetY);
- console.log(ev.clientX, ev.clientY);
- console.log(ev.pageX, ev.pageY);
- console.log(ev.screenX, ev.screenY);
- console.log(ev.layerX, ev.layerY);
- console.log(ev.x, ev.y);
- }
- }
- </script>
- </body>
- </html>
二、不同瀏覽器對這些屬性的支持：
三、圖解 event.offsetX，event.clientX，event.pageX，event.screenX屬性
四、圖解 event.layerX，event.layerY 屬性
五、圖解 event.x，event.y 屬性
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
六、Jquery 兼容寫法
jQuery event 事件對象，包含有 event.offsetX， event.clientX，event.pageX，event.screenX等屬性（firefox 瀏覽器中， offsetX 爲 undefined）。firefox 獲取 offsetX / offsetY 的值，需要通過 event 對象的屬性 originalEvent。
- <script>
- $(function(){
- $("#box").mousedown(function(event){
- console.log(event.offsetX, event.offsetY);
- console.log(event.clientX, event.clientY);
- console.log(event.pageX, event.pageY);
- console.log(event.screenX, event.screenY);
- /* firefox */
- console.log(event.originalEvent.layerX, event.originalEvent.layerY);
- });
- });
- </script>
