CSS 공부 ( pointer-event )

회사 프로젝트 특성상 svg를 이용한 이미지 출력이 많습니다.

svg를 그리다 보면 부분적으로 클릭을 하고 싶거나

앞쪽에 있는 요소를 클릭할 필요가 없는데 클릭되는 경우가 있습니다.

 

찾아보니 css를 사용하여 클릭이벤트를 제어할 수 있었는데, 그 방법 중 하나가 pointer-events입니다.

해당 속성을 사용하면 특정 요소에서의 클릭 이벤트를 동작하지 않도록 제어할 수 있습니다.

 

See the Pen Untitled by Dongyeop (@Yoepee) on CodePen.

간단하게 MDN 코드 참고해서 만들어보았습니다.

사용해보면 알겠지만, 옵션에 따라 클릭이 가능한 범위와 클릭이 되지 않는 범위가 나뉩니다.

// pointer-events속성이 지정되지 않은 경우와 동일하게 동작
pointer-events: auto;

// 포인터 이벤트의 대상에서 제외됩니다.
pointer-events: none;

// 포인터가 요소의 둘레 위에 있는 경우에만 대상으로 지정됩니다.
pointer-events: stroke; /* SVG only */

// 포인터가 요소의 내부 위에 있는 경우에만 대상으로 지정됩니다.
pointer-events: fill; /* SVG only */

 

사용에 따라서 두개의 요소가 겹쳐있다면 앞에 요소에 

pointer-events: none;

옵션을 걸어주면 뒤에 요소만 클릭되도록 범위 설정도 가능합니다.

 

 

참고 자료: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

pointer-events - CSS: Cascading Style Sheets | MDN

참고 자료: https://inpa.tistory.com/entry/CSS-%F0%9F%93%9A-pointer-events-%ED%81%B4%EB%A6%AD-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B0%A9%EC%A7%80

🎨 클릭 이벤트 방지 pointer-events 속성