pointer-events

pointer-events

pointer-events 유틸리티는 요소가 마우스나 터치 같은 포인터 이벤트를 받을지 말지를 결정해 줘요. 겹쳐 있는 요소를 다룰 때 특히 유용하답니다.

출처: 문서

본문

클래스 스타일 (ClassStyles)

예시 (Examples)

포인터 이벤트 무시하기 (Ignoring pointer events)

pointer-events-none 유틸리티를 사용하면 요소가 :hover나 click 같은 포인터 이벤트를 무시하게 할 수 있어요:

검색 아이콘을 클릭해서 기대했던 동작을 확인해 보세요.

<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>

참고로 포인터 이벤트는 자식 요소에서는 여전히 동작하고, 대상 요소 "아래"에 있는 요소로 통과해서 전달돼요.

포인터 이벤트 복원하기 (Restoring pointer events)

pointer-events-auto 유틸리티를 사용하면 포인터 이벤트에 대한 기본 브라우저 동작으로 되돌릴 수 있어요:

<div class="pointer-events-none md:pointer-events-auto ...">
  <!-- ... -->
</div>

더 알아보기 (Learn more)

변형(variant) 사용법에 대해 더 알고 싶다면 variants 문서를 살펴보세요.