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 對象，其描述了元素的方位和寬高等信息。

除了這些直接屬性外，還可以結合其他元素獲取更詳細的坐標：

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

【相關推薦】

1. 特別推薦：“php程序員工具箱”V0.1版本下載

2. 免費html在線視頻教程

3. VeVb.com原創html5視頻教程

以上就是HTML知識-- 鼠標、元素坐標和ClientRect對象屬性的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。