일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
31 |
- 서버리스 #
- es6
- entity
- 1px border
- Websocket
- font-size
- angular
- 컴포넌튼
- npm
- ES5
- literal
- 문서번호
- ZOOM
- github
- 데이터베이스 #try #이중
- 타입스크립트
- 0.75px border
- 전역변수
- &연산
- Strict
- jwt
- 0.5px border
- TypeScript
- Props
- 으
- 10px
- TS
- 클론코딩
- 당근마켓
- 0.25px border
- Today
- Total
복잡한뇌구조마냥
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
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
'FE > CSS' 카테고리의 다른 글
CSS 공부 ( Custom Scrollbar ) (0) | 2023.05.11 |
---|---|
CSS공부 ( nth-child ) (0) | 2023.05.04 |
CSS 공부 ( font-size 10px 이하 ) (0) | 2023.04.17 |
CSS 공부 ( border 굵기 조절 ) (0) | 2023.04.11 |
CSS 공부 ( 브라우저 접두사 [prefix] ) (0) | 2023.03.24 |