🚨 Home section page에서 해당 페이지로 이동하는 page-box를 입력할 때, box 안에 있는 element를 클릭하면, event가 작동하지 않는 버그를 발견했다.

🚩 해결 1.

→ pointer-events: none;

box안에 있는 태그들의 style에 pointer-event를 none을 주면 클릭 했을 때, event를 받지 않는다.

EX)

.box i {
  pointer-events: none;
}
.box_basic {
  pointer-events: none;
}
.box_hover {
  pointer-events: none;
}

🚩 해결 2.

→ event를 부여하고 싶은 해당 Node가 나올 때 까지 ChildNode에서부터 거슬러 올라온다.

EX)

function homeMainBoxClickHandler(e) {
  let elem = e.target;
  while (!elem.classList.contains("box")) {
    elem = elem.parentNode;
    if (elem.nodeName === "BODY") {
      elem = null;
      return;
    }
  }
  scrollIntoView(elem.dataset.page);
}

부모 노드에 “box”를 포함한 노드 그 위로 올라가면 console에 에러가 출력된다.

Body까지 올라간 후, 그 element에 null을 할당하면, return문에 의해 종료된다.

또는 closest( )매소드를 쓸 수 있다.

function homeMainBoxClickHandler(e) {
  let elem = e.target;
  while (!elem.classList.contains("box")) {
    elem = elem.parentNode;
    if (elem.closest("#home")) {
      elem = null;
      return;
    }
  }
  scrollIntoView(elem.dataset.page);
}

가장 가까운 부모 Node 중, ID가 home인 경우, return문에 의해 종료된다.