[jQuery] 點擊後取得該點在元素上的座標位置

這邊要來做一個功能是點擊紅色區塊，可以知道我目前點的位置是在區塊上的座標位置何處。

首先我 css 寫這樣：

.box{
  width: 200px;
  height: 200px;
  background: red;
  position:relative;
}

接著在上面抓點擊事件，透過 e.pageX - 元素的 offset().left 可以取得點擊那個點在元素的相對 x 座標，y 座標同理：

$(".box").click(function(e){
  let xPos = e.pageX - $(this).offset().left;
  let yPos = e.pageY - $(this).offset().top;
})

完整程式碼：