互動性
pointer-events
用於控制元素是否響應指針事件的工具類別。
| 類別 | 樣式 |
|---|---|
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>