pointer-events 속성

CSS의 pointer-events 속성은
요소가 클릭, 호버, 드래그 등 포인터 이벤트에 대해 어떻게 반응하는지를 제어하는 속성입니다. 이 속성은 요소가 포인터 이벤트의 대상이 될 수 있는지 여부를 지정합니다.

포인터 이벤트 개념 알아보기

마우스, 터치, 펜 등과 같은 포인팅 장치를 통해 발생하는(이벤트가 발생한다고 함) 사용자의 상호작용을 말합니다. 이러한 포인터 이벤트는 사용자가 웹 페이지나 애플리케이션과 상호작용할 때 발생하며, 클릭, 호버, 드래그 등 다양한 동작이 있습니다. 포인터 이벤트는 사용자 인터페이스의 동작 및 상호작용을 제어하고 사용자 경험을 향상시키는 데에 중요한 역할을 합니다.

예를 들어, 마우스로 요소를 클릭하면 클릭이라는 행위에 대한 포인터 이벤트가 발생합니다. 모바일에서 요소에 터치하면 터치하는 행위에 대한 포인터 이벤트가 발생합니다. 마우스로 요소를 호버하거나 드래그할 때에도 마찬가지로 포인터 이벤트가 발생합니다.

pointer-events 속성은 이러한 포인테 이벤트 대상이 될 수 있는지 여부를 지정합니다.

형식 구문

CSS 
selector {
    pointer-events: auto | none;
}

형식 정의

pointer-events 속성 형식 정의
초깃값 auto
적용 요소 모든 요소
상속 예
애니메이션 아니오

값

pointer-events 속성 값
auto 초깃값. 요소는 일반적으로 동작하며 기존 속성에 따라 포인터 이벤트에 응답합니다(예: 클릭 가능한 요소는 클릭이 가능하고, 텍스트는 선택 가능합니다).
none 해당 요소는 포인터 이벤트의 대상이 되지 않습니다. 그러나, 이 요소의 자식 요소 중 pointer-events 속성이 다른 값으로 설정된 요소가 있다면, 포인터 이벤트는 해당 자식 요소를 대상으로 할 수 있습니다. 이러한 상황에서 포인터 이벤트는 이 부모 요소의 이벤트 캡처/버블 단계 동안에 해당 자식 요소를 통과하는 동안 적절한 이벤트 리스너를 활성화시킬 수 있습니다.

구문

CSS 
/* 키워드 값 */
pointer-events: none;
pointer-events: auto;

/* 전역 값 */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;
pointer-events: revert;
pointer-events: revert-layer;

예제

예제를 통해 pointer-events 값에 대해 살펴보겠습니다.
다음은 pointer-events: none;으로 <a> 요소를 클릭에 대한 포인터 이벤트 대상에서 제외해 보겠습니다.

HTML 
<a href="https://www.naver.com/">클릭해서 Naver로 이동하기</a>
CSS 
a {
    pointer-events: none;
}

pointer-events: none;으로 <a> 요소를 클릭에 대한 포인터 이벤트 대상에서 제외하면 <a> 요소는 클릭이 적용되지 않습니다.

실제 적용된 모습 pointer-events: none;이 적용된 모습니다. 클릭해보세요! 클릭이 적용되지 않습니다.

주의할 점

pointer-events 속성을 사용할 때에는 두 가지 사항을 반드시 고려해야 합니다.

접근성 고려

pointer-events 속성을 사용할 때는 접근성 문제를 고려해야 합니다. pointer-events: none;을 사용하면 해당 요소에 포인터 이벤트가 전달되지 않으므로, 마우스나 터치로 요소를 클릭하거나 클릭할 수 없습니다. 이로 인해 시각장애인이나 손이 불편한 사용자는 해당 요소를 사용할 수 없게 될 수 있습니다. 접근성 지침을 준수하고 포인터 이벤트 제어를 사용하는 것이 중요합니다.

pointer-events: none이 지정되어 있을 경우 cursor 속성 작동 안 됨

cursor 속성은 마우스 포인터가 요소 위에 있을 때 표시될 커서 모양을 지정합니다.

해당 요소에 pointer-events: none이 지정되어 있을 경우 해당 요소는 포인터 이벤트의 대상이 되지 않습니다. cursor 속성을 지정한다고 하더라도 cursor 속성은 작동하지 않습니다.

즉, 마우스 커서는 해당 요소가 무시되고, 시각적 레이어에서 더 아래에 있는 요소의 cursor 속성에 의해 커서 모양이 결정됩니다.

"아래에 위치한 요소"는 DOM 구조 상의 부모 요소가 아니라, 시각적 레이어에서 해당 요소 아래에 겹쳐진 요소를 의미합니다.

다음의 예시 상황으로 살펴보겠습니다.

HTML 
<div class="parent" style="cursor: not-allowed;">
  <div class="child" style="pointer-events: none; cursor: pointer;">
    클릭할 수 없는 영역
  </div>
</div>
실제 적용된 모습 마우스 커서를 올려보세요! not-allowed 커서 모양이 나타납니다.
  • .child: pointer-events: none이 적용되어 있어, 이 요소 위에 마우스를 올려도 커서 모양이 pointer로 바뀌지 않습니다. 이 요소는 마우스 이벤트를 받지 않기 때문에, 그 위에 커서를 올려도 반응하지 않습니다.
  • .parent: .child의 시각적 레이어 기준으로 아래에 있는 .parent가 마우스 이벤트를 대신 받게 되고, .parent의 cursor: not-allowed가 적용되어, not-allowed 커서 모양이 나타납니다.

브라우저 호환성

pointer-events 속성에 대한 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
pointer-events 2.0 12.0 3.6 4.0

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

pointer-events 속성에 대한 명세서
명세서 사양
pointer-events CSS Basic User Interface Module Level 4
#pointer-events-control

참고문헌

같이 보기