🎨 클릭 이벤트 방지 pointer-events 속성

pointer-events 속성

css를 사용하여 클릭이벤트를 제어할 수 있는데, 그 방법 중 하나가 바로 CSS 프로퍼티인 pointer-events 이다. 이 프로퍼티를 사용하면 특정 요소에서의 클릭 이벤트를 동작하지 않도록 제어할 수 있다.  

• none  :  클릭 이벤트를 적용하지 않음
• auto  :  브라우저 자동으로 선택함
• inherit  :  상속 되어짐

만약 none의 값을 사용할 경우 클릭 이벤트가 동작하지 않으며 마우스 관련된 효과 (click, :hover) 역시 동작하지 않게 된다.

예를들어 아래와 같이 파란색 박스 영역과 하늘색 박스 영역이 있는데, 하늘색 영역이 파란색 영역을 위에 덮어 일부분을 가리고 있는 상태이다. 이 상태에서 가리고 있는 일부분 영역을 클릭하면 파란색 영역에 등록된 click 이벤트가 발생하지 않는다. 어찌 보면 당연한 수순이라 생각할텐데, 이 때 pointer-events 속성을 사용하여 클릭이 정상 동작하도록 만들 수 있다.

<div>
  <div class="pointer"></div>
  <div class="click" onclick="alert('파랑색 영역을 클릭하였습니다');"></div>
</div>

<div>
  <div class="pointer2">pointer-events</div>
  <div class="click" onclick="alert('파랑색 영역을 클릭하였습니다');"></div>
</div>

.pointer2 {
  width: 100px;
  height: 100px;
  position: relative;
  top: 60px;
  left: 30px;
  background: skyblue;
  
  pointer-events: none; /* 하늘색 영역에 포인터 관련 동작을 none으로 함으로써 무시하게 한다 */
}

pointer-events 속성이 적용된 우측 중복된 영역을 클릭해보면 아까와 다르게 클릭이벤트가 동작하여 알랏이 출력하게 된다. 마우스가 해당 영역에는 동작하지 않고 그 아래에 겹쳐있는 다른 엘리먼트의 클릭 이벤트를 호출하게 되는 것이다.

이처럼 애니매이션이나 복잡한 인터렉션 구현시 각각의 엘리먼트 요소가 중첩될 수 있는데, 이 경우 클릭 영역이 가려져 동작하지 않어, 이를 방지하기 위해서 pointer-events 속성이 필요하게 된다.
예를들어 position 과 z-index를 통해 영역이 겹쳐지면 z-index가 높은 영역의 이벤트만 발생되게 되는데, 하지만 뒤에 있는 영역의 이벤트는 발생 시키고 싶을 때 이용될 수 있다.

/* z-index를 무시하고 겹쳐있는 영역을 클릭했을때 뒤에 있는 click 이벤트 반응하게 하기 */
test {
    z-index: 999;
    
    pointer-events: none; /* HTML 요소에 정의된 이벤트( click, hover, drag, active...등 )를 비활성화한다. */
}

---

# 참고자료

https://webisfree.com/2019-03-14/css-%ED%94%84%EB%A1%9C%ED%8D%BC%ED%8B%B0-pointer-events-property