일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- Props
- github
- 컴포넌튼
- npm
- 당근마켓
- 데이터베이스 #try #이중
- 문서번호
- Websocket
- 0.25px border
- &연산
- TS
- 0.5px border
- es6
- 타입스크립트
- 클론코딩
- 10px
- Strict
- ZOOM
- ES5
- font-size
- 서버리스 #
- angular
- 0.75px border
- 1px border
- 전역변수
- TypeScript
- readonly
- entity
- jwt
- literal
- Today
- Total
복잡한뇌구조마냥
CSS 공부 ( pointer-event ) 본문
회사 프로젝트 특성상 svg를 이용한 이미지 출력이 많습니다.
svg를 그리다 보면 부분적으로 클릭을 하고 싶거나
앞쪽에 있는 요소를 클릭할 필요가 없는데 클릭되는 경우가 있습니다.
찾아보니 css를 사용하여 클릭이벤트를 제어할 수 있었는데, 그 방법 중 하나가 pointer-events입니다.
해당 속성을 사용하면 특정 요소에서의 클릭 이벤트를 동작하지 않도록 제어할 수 있습니다.
간단하게 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
The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.
developer.mozilla.org
🎨 클릭 이벤트 방지 pointer-events 속성
pointer-events 속성 css를 사용하여 클릭이벤트를 제어할 수 있는데, 그 방법 중 하나가 바로 CSS 프로퍼티인 pointer-events 이다. 이 프로퍼티를 사용하면 특정 요소에서의 클릭 이벤트를 동작하지 않도
inpa.tistory.com