01Jan2020 TIL

Today I learned :

• Find closest element event

 

---

위치가 랜덤으로 설정된 엘리먼트들 중 클릭한 타겟 엘리먼트에서 가장 가까운 위치에 있는 엘리먼트에게 새로운 이미지를 추가하는 이벤트를 구현하려고 한다. 과제 가이드라인에 따르면, Pythagorean theorem (피타고라스의 정리)를 이용하여 대각선의 길이가 가장 짧은 엘리먼트를 구하는 과정이 필요했다.

 

우선, 화면에 구현된 이벤트 타겟이 어떤 것을 의미하는지 console.log(event.target)를 통해 살펴보았다. Span 이나 Div가 아닌 이미지가 찍혀서 해당 이미지의 style 을 살펴 보았더니 style 로 지정된게 없었다. 따라서 해당 이미지의 부모 엘리먼트를 살펴볼 필요가 있었다. 해당 부모 노트를 찾고, style을 살펴보았더니 top과 left 값이 지정되어 있었다. 이렇게 타겟 엘리먼트의 위치 정보를 획득했다.

 

추가된 모든 엘리먼트들의 위치 값을 살펴 타겟 엘리먼트와의 대각선 길이를 살펴보아야한다. 루프 실행 중, 가장 짧은 대각선을 가진 엘리먼트를 오버라이트 하여 배열에 담는다. 루프가 끝나면, 해당 배열에 담긴 엘리먼트를 꺼내고, 원하는 이벤트를 실행시키면 된다. 

 

function findClosest(item) {
  let arr = []; //피타고라스 값을 담는 배열
  let result = []; //가장 작은 피타고라스의 값을 가진 엘리먼트 소스를 담는 곳
  let node = item.target.parentNode;
  for (let el of dancers) {
    // 이벤트 타겟의 가까운 엘리먼트를 찾는 반복문
    if (el !== node) {
      let abTop = Math.abs(
        parseFloat(el.style.top) - parseFloat(node.style.top)  
        //234.58px -> 234.58로 숫자만 리턴해주는 내장 함수
      );
      let abLeft = Math.abs(
        parseFloat(el.style.left) - parseFloat(node.style.left)
      );
      let catty = pythagorean(abTop, abLeft);
      arr.push(catty);
      if (Math.min(...arr) === catty) {
        result[0] = el; //overwrite해서 최종값 1개만 도출할 수 있게 한다.
      }
    }
  }
  giveBlock(result[0]);	// 가장 가까운 엘리먼트에게 이벤트를 걸어주는 부분
}

function pythagorean(a, b) {			//피타고라스의 정리
  let result = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
  return result;
}

 

깜빡이는 엘리먼트들을 그만 깜빡이게 하고 싶은데, 아직 해당 기능을 어떻게 구현해야할지 모르겠다. 내일 질문해야겠다. 끝