css 프로퍼티인 pointer-events에 대하여 알아봅니다. 어떻게 사용하고 언제 사용할까요?
# CSS Property pointer-events
css를 사용하여 클릭이벤트를 제어할 수 있을까요? 그 방법 중 하나가 바로 CSS 프로퍼티인 pointer-events입니다. 이 프로퍼티를 사용하면 특정 요소에서의 클릭 이벤트를 동작하지 않도록 제어할 수 있습니다.  아래는 간단한 사용 방법입니다.

.prevent-click { pointer-events: none; }


이 속성은 CSS3의 프로퍼티로 선택 가능한 옵션은 아래와 같이 세 가지가 있습니다.

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

참고로 만약 none의 값을 사용할 경우 클릭 이벤트가 동작하지 않으며 마우스 클릭과 관련된 효과 역시 동작하지 않습니다. 예를들어 :hover를 사용하는 경우에도 적용되지 않으니 참고하세요.

그럼 아래에서는 예제를 사용해 더 자세히 알아보도록 하겠습니다.



# CSS pointer-events 예제보기
아래의 두 개의 엘리먼트 중 오렌지색인 하나는 클릭 이벤트를 가지고 있고 그 위의 초록색은 클릭 이벤트의 일부를 가리고 있습니다.

만약 초록색이 가리는 부분을 클릭하지 동작하지 않을 것입니다. 이 때 pointer-events 사용하여 클릭이 정상 동작하도록 만드는 예제입니다. 먼저 html 파일입니다.

@ pointerEvents.html
<div class="ani">Animation</div>
<div class="click" onclick="alert('Hi!');">Click</div>

다음은 css 스타일입니다.
@ pointerEvents.css
.ani {
  width: 100px;
  height: 100px;
  position: relative;
  top: 30px;
  left: 30px;
  background: green;
}
.click {
  width: 100px;
  height: 100px;
  background: orange;
}
 
위 코드를 실행하면 아래와 같이 브라우저에 나타납니다.

Animation
Click

만약 위의 Animation 겹치는 부분을 클릭하면 어떻게 동작할까요? 당연히 클릭 이벤트가 동작하지 않게됩니다. 이 경우 Animation이 있는 녹색 엘리먼트에 아래와 같이 pointer-events: none을 추가해보겠습니다.
.ani {
  width: 100px;
  height: 100px;
  position: relative;
  top: 30px;
  left: 30px;
  background: green;
  pointer-events: none;  //  제일 하단에 추가함
}

이제 새로운 프로퍼티 pointer-events가 추가되었습니다. 이제 다시 중복된 영역을 클릭해보면 어떻게 동작하는지 확인할 수 있습니다.

Animation
Click

이번에는 아까와 다르게 클릭이벤트가 동작하여 Hi라고 출력하게 됩니다. 이처럼 마우스가 해당 영역에는 동작하지 않고 그 아래에 겹쳐있는 다른 엘리먼트의 클릭 이벤트를 호출하게됩니다.


! css 클릭 이벤트 제어가 사용되고 필요한 경우는?
애니매이션이나 복잡한 인터렉션 구현시 각각의 엘리먼트 요소가 중첩될 수 있습니다. 이 경우 클릭 영역이 가려져 동작하지 않을 수 있는데 이를 방지하기 위해서도 필요합니다.

브라우저 호환성의 경우 IE 11 이상의 대부분의 브라우저에서 동작합니다.