pointer-events:none;

*  pointer-events: 클릭 이벤트 허용 여부

pointer-events는 요소에 부여된 이벤트를 제거하거나 활성화시킬 수 있다.

좀 더 자세히 말하자면 HTML요소의  마우스/터치 이벤트(css-hover/active, JS-click/tap, 커서 드래그 등)에 어떻게 반응할 지 지정할 수 있는 속성이다.

 

pointer-events: auto; // 비활성화된 이벤트를 다시 기본 기능을 하도록 되돌림.
pointer-events: none; // 요소가 포인터 이벤트의 대상이 되지 않음.

// svg 전용값 생략

 

☠️  사용 시 유의할 점

해당 속성이 지정되었더라도 반드시 이벤트의 이벤트 리스너가 호출되지 않을거라는 보장은 없다.

 

예를 들어 부모 엘리먼트가 pointer-events: none 속성을 가지고 있어도 자식 중 pointer-events: auto를 가진 엘리먼트가 있다면, 해당 자식 엘리먼트에 트리거가 된 이벤트가 버블링 또는 캡쳐링 되는 과정에서 부모 엘리먼트의 이벤트 리스너가 호출될 수 있다.

 

또한, tab 키를 사용한 순차적 키보드 내비게이션으로 인한 포커스를 획득할 수 있다.