인터랙티비티
pointer-events
엘리먼트가 포인터 이벤트에 반응하는지 여부를 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
pointer-events-auto | pointer-events: auto; |
pointer-events-none | pointer-events: none; |
예제
포인터 이벤트 무시하기
pointer-events-none 유틸리티를 사용하면 :hover나 click 이벤트와 같은 포인터 이벤트를 무시할 수 있습니다.
검색 아이콘을 클릭하여 예상 동작을 확인하세요
pointer-events-auto
pointer-events-none
<div class="relative ..."> <div class="pointer-events-auto absolute ..."> <svg class="absolute h-5 w-5 text-gray-400"> <!-- ... --> </svg> </div> <input type="text" placeholder="Search" class="..." /></div><div class="relative ..."> <div class="pointer-events-none absolute ..."> <svg class="absolute h-5 w-5 text-gray-400"> <!-- ... --> </svg> </div> <input type="text" placeholder="Search" class="..." /></div>포인터 이벤트는 여전히 자식 엘리먼트에서 트리거되며, 대상 엘리먼트 "아래"에 있는 엘리먼트로 전달됩니다.
포인터 이벤트 복원
pointer-events-auto 유틸리티를 사용해 포인터 이벤트의 기본 브라우저 동작을 복원할 수 있습니다:
<div class="pointer-events-none md:pointer-events-auto ..."> <!-- ... --></div>