HTML 滑鼠座標和元素座標，html滑鼠座標元素

HTML 滑鼠座標和元素座標，html滑鼠座標元素

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

 

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

樣本

 

==================================系列文章==========================================

本篇文章：1.7 HTML 滑鼠座標和元素座標

Web開發之路系列文章