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

?

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

示例

?

End Web開發之路系列文章 菜單加載中...

轉載于:https://www.cnblogs.com/polk6/p/6624779.html

總結

以上是生活随笔為你收集整理的HTML 鼠标坐标和元素坐标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。