Các tiện ích để kiểm soát xem một phần tử có phản hồi các sự kiện con trỏ hay không.
| Class | Styles |
|---|---|
pointer-events-auto | pointer-events: auto; |
pointer-events-none | pointer-events: none; |
Sử dụng tiện ích pointer-events-none để làm cho một phần tử bỏ qua các sự kiện con trỏ, như sự kiện :hover và click:
Nhấp vào các biểu tượng tìm kiếm để thấy hành vi mong đợi
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>Các sự kiện con trỏ vẫn sẽ kích hoạt trên các phần tử con và đi qua các phần tử nằm "bên dưới" mục tiêu.
Sử dụng tiện ích pointer-events-auto để quay lại hành vi trình duyệt mặc định cho các sự kiện con trỏ:
<div class="pointer-events-none md:pointer-events-auto ..."> <!-- ... --></div>