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

首先我 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;
})

完整程式碼: