[CSS] pointer-events를 사용해서 마우스 이벤트 방지 및 제어하기

pointer-events ?

해당 속성을 통해 마우스 이벤트(hover, click, drag 등)에 어떻게 동작할지 지정할 수 있다. 다만, 대부분의 속성 값은 SVG 전용이기 때문에 기본 html 태그에는 none 또는 auto 값만 설정할 수 있다.

[속성 값]

• none : 요소가 포인터 이벤트의 대상이 되지 않는다. 그러나 해당 요소의 자손이 다른 pointer-events 값을 지정한 경우, 그 자손은 대상이 될 수 있다.
• auto : 요소가 pointer-events 속성을 지정하지 않은 것처럼 행동한다.
• inherit : 부모 요소로부터 pointer-events 값을 상속받는다.

(더 많은 속성 값은 https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events 에서 확인 가능)

마우스 이벤트를 막는다? 그럼 보편적인 event.preventDefault() 사용하면 되지 않을까?

요소의 기본 동작을 막는 상황(submit 타입의 button 또는 링크가 걸린 a 태그 등)에서는 당연히 대체해서 사용할 수 있다. 하지만, 필자의 경험 상 기본 태그들에 대해 클릭 이벤트를 막아야 할 경우가 적지 않게 있었다. 

예를 들면, 버튼으로 만든 div 태그를 어떤 조건에 따라 unclickable 상태로 만들어야 하는 경우이다. div 태그는 button 또는 a 태그와 같이 클릭 이벤트에 대한 정의가 되어 있지 않다.

따라서, div 태그를 unclickable 하게 만들려면 해당 요소에 pointer-events: none 값을 부여하는 것이다. (개인적으로 매우 유용하게 사용하고 있는 css 속성🤩)

주의 사항

• 부모 요소에 해당 속성 적용 시 하위 요소들 모두 동일 적용된다.
• 해당 속성이 지정되었더라도 마우스 이벤트의 이벤트 리스너가 호출되지 않을 거란 보장은 없다.
  • 부모 요소에 pointer-events: none 속성이 부여되어 있고, 하위 요소가 pointer-events: auto 속성을 가졌다면, 해당 자식 요소는 이벤트 버블링 또는 캡쳐링 과정에서 부모 요소의 이벤트 리스너가 호출될 수 있다.

브라우저 호환성