在這一篇文章中，將會介紹鼠標坐標、元素坐標以及鼠標在指定元素內的坐標。
1. 鼠標坐標
在觸發鼠標相關事件時(如：click、mousemove)，可以通過事件對象獲取當前鼠標的坐標。
獲取的坐標可分為2種：
1) MouseEvent.screenX、MouseEvent.screenY ：基於屏幕的X、Y坐標；以屏幕的左上角為0,0起始點。
2) MouseEvent.clientX、MouseEvent.clientY ：基於body的X、Y坐標；以當前body的左上角為0,0起始點，若body含有水平滾動條或垂直滾動條時，左上角還是0,0坐標點。
2. 元素的坐標
元素的getBoundingClientRect()方法可獲取一個 ClientRect 對象，其描述了元素的方位和寬高等信息。
2.1 ClientRect對象屬性
| 屬性名稱 | 屬性說明 |
| width | 元素的寬度 |
| height | 元素的高度 |
| left | 元素左上角距離當前可視body的寬度 |
| top | 元素左上角距離當前可視body的高度 |
| right | 元素右下角距離當前可視body的寬度；right = left + width |
| bottom | 元素右下角距離當前可視body的高度；bottom = top + height |
2.2 圖示
2.3 其他坐標
除了這些直接屬性外，還可以結合其他元素獲取更詳細的坐標：
1) 元素左上角在整體body的水平坐標 = document.body.scrollLeft + element.getBoundingClientRect().left;
2) 元素左上角在整體body的垂直坐標 = document.body.scrollTop + element.getBoundingClientRect().top;
3. 鼠標在元素內的坐標
通過之前學到的獲取鼠標坐標和元素坐標后，還可進一步獲取鼠標在元素內的坐標。
以鼠標在元素內的x坐標為例，等於鼠標的 clientX 減去 元素的getBoundingClientRect()放的left，最后在加上元素的scrollLeft的值。
公式如下：
x = mouse.clientX - element.left + element.scrollLeft
y = mouse.clientY - element.top + element.scrollTop
示例
