CSS 이벤트 제어 속성

요소에 부여된 이벤트를 제거하거나 활성화시켜야 하는 경우가 있는데 이럴 때 pointer-events 속성을 사용한다. 요소들의 마우스/터치 이벤트들의 응답을 조절할 수 있다.

HTML 요소에서 사용 가능한 속성값

• none : 요소가 포인터 이벤트의 대상이 되지 않는다. 해당 요소의 자손이 다른 pointer-events 값을 가지고 있는 경우 그 자손은 대상이 될 수 있다.
• auto : 요소가 pointer-events 속성을 지정하지 않은 것처럼 한다. svg에서는 auto와 visiblePainted가 동일한 효과를 지닌다.
• inherit : 부모 요소로부터 pointer-events 속성값을 상속받는다.

IE9와 IE10에서 pointer-events가 작동하지 않으므로 visibility: hidden과 함께 사용하는 것을 고려해야 한다.

SVG 전용 속성값

• visiblePainted
• visibleFill
• visibleStroke
• visible
• painted
• fill
• stroke
• all

---

REFERENCE
https://developer.mozilla.org/ko/docs/Web/CSS/pointer-events