HTML 오버레이(div)를 통과하는 마우스 클릭 전달 방법

HTML 오버레이(div)를 통과하는 마우스 클릭 전달 방법

웹 개발에서 오버레이(overlay) 요소는 다른 콘텐츠 위를 덮는 레이어로 자주 사용됩니다. 하지만 오버레이가 화면을 덮고 있으면 클릭 이벤트가 오버레이에 가로채져, 그 아래 있는 요소로 전달되지 않는 문제가 발생합니다. 이번 글에서는 오버레이 아래의 요소까지 마우스 클릭을 전달하는 두 가지 방법을 소개합니다.

방법 1. document.elementFromPoint()로 실제 대상 요소 찾기

먼저 클릭 이벤트에서 마우스 좌표를 가져옵니다.

// 클릭 이벤트에서 마우스 좌표 얻기
document.addEventListener('click', function(e) {
  const x = e.clientX;
  const y = e.clientY;
});

그다음 오버레이를 잠시 숨긴 뒤, 아래 코드로 해당 좌표에 위치한 요소를 조회합니다. 작업이 끝나면 오버레이를 다시 표시하면 됩니다.

document.elementFromPoint(x, y)

elementFromPoint()는 지정한 좌표에 있는 최상단 요소를 반환하는 DOM API입니다. 오버레이를 잠깐 숨기면 이 메서드가 오버레이 아래에 있는 진짜 대상 요소를 반환하므로, 원하는 동작을 직접 실행할 수 있습니다.

방법 2. CSS pointer-events 속성 활용

더 간단한 방법은 CSS의 pointer-events 속성을 사용하는 것입니다.

div {
  pointer-events: none;
}

pointer-events: none;을 적용하면 해당 요소가 마우스 이벤트를 받지 않고, 클릭이 그대로 아래 요소에 전달됩니다. 단, 이렇게 설정하면 오버레이 자체도 클릭을 감지할 수 없게 되므로 주의해야 합니다.

참고: 일부 영역만 클릭을 허용하고 싶다면

오버레이 전체가 아니라 특정 상황에서만 클릭을 통과시키고 싶다면, 클래스를 활용해 조건부로 제어할 수 있습니다.

.overlay {
  pointer-events: none;
}
.overlay.active {
  pointer-events: auto;
}

정리하면, 단순히 클릭만 아래로 통과시키면 되는 경우 CSS 방식이 간편하고, 클릭된 정확한 요소를 파악해 추가 로직을 수행해야 한다면 elementFromPoint() 방식이 유용합니다. 상황에 맞는 방법을 선택해 적용해 보세요.