question：如何獲取點(diǎn)擊元素的坐標(biāo)呢?
answer: 原生標(biāo)簽元素的方法 Element.getBoundingClientRect();
<div onclick="clickElement">
<div>
// 觸發(fā)元素的點(diǎn)擊事件
function clickElement(e) {
// 元素的 getBoundingClientRect()能夠獲取到點(diǎn)擊元素相對(duì)于 “瀏覽器視口” 所在的坐標(biāo)
const rect = e.target.getBoundingClientRect();
// rect 是一個(gè)包含標(biāo)簽元素位置信息相關(guān)的對(duì)象
console.log(rect );
/* rect對(duì)象如下
{
x : 146 // 元素左上角距離瀏覽器視圖左上角的橫坐標(biāo)的值
y : 50 // 元素左上角距離瀏覽器視圖左上角的縱坐標(biāo)的值
width : 440
height : 240
top : 50
right : 586
bottom : 290
left : 146
}*/
}
對(duì)象的相關(guān)屬性如下圖所示
image.png
