在這一篇文章中，將會介紹滑鼠座標、元素座標以及滑鼠在指定元素內的座標。

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物件屬性

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

示例