Tailwind CSS 指標事件

Tailwind CSS **指標事件**是一組預定義的類，用於控制元素如何處理滑鼠事件，使您可以輕鬆地在設計中啟用或停用指標互動。

Tailwind CSS 指標事件類

下面列出了 Tailwind CSS 指標事件類，用於控制元素上指標事件的行為。

類	CSS 屬性
pointer-events-none	pointer-events: none;
pointer-events-auto	pointer-events: auto;

Tailwind CSS 指標事件類的功能

**pointer-events-none:** 此類使元素忽略所有滑鼠操作（如點選）。
**pointer-events-auto:** 此類允許元素正常響應滑鼠操作。

Tailwind CSS 指標事件類示例

以下是 Tailwind CSS 指標事件類的示例，展示瞭如何控制元素是否可以與滑鼠操作互動。

處理指標事件

此示例展示瞭如何使用 Tailwind CSS 指標事件類處理滑鼠事件。**pointer-events-auto** 類允許元素正常響應滑鼠互動，而 **pointer-events-none** 使元素忽略所有滑鼠事件，這對於停用點選或懸停效果很有用。

示例

  
<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <div class="p-4">
        <h2 class="text-xl font-bold mb-4">
            Tailwind CSS Pointer Events
        </h2>
        <div class="mb-2">
            <h3 class="text-lg font-semibold underline">
                pointer-events-none
            </h3>
            <p class="bg-sky-100 p-4 pointer-events-none">
                Ignores all mouse actions.
            </p>
        </div>
        <div class="mb-4">
            <h3 class="text-lg font-semibold underline">
                pointer-events-auto
            </h3>
            <p class="bg-sky-100 p-4 pointer-events-auto">
                Responds to mouse actions.
            </p>
        </div>
    </div>
</body>

</html>

停用和啟用點選

此示例顯示了 Tailwind CSS 指標事件。**pointer-events-none** 類停用點選，而 **pointer-events-auto** 啟用點選並顯示訊息。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <div class="p-4">
        <h2 class="text-xl font-bold mb-4">
            Tailwind CSS Pointer Events
        </h2>
        <div class="mb-4">
            <h3 class="text-lg font-semibold">
                pointer-events-none
            </h3>
            <button class="bg-cyan-500 text-white p-2 
                rounded pointer-events-none">
                No Clicks
            </button>
            <p class="text-sm text-gray-600 mt-2">Ignores clicks.</p>
        </div>
        <div>
            <h3 class="text-lg font-semibold">
                pointer-events-auto
            </h3>
            <button class="bg-green-500 text-white p-2 rounded 
                pointer-events-auto" onclick="document.getElementById
                ('message').innerText = 'Button clicked!'">
                    Click Me
            </button>
            <p class="text-sm text-gray-600 mt-2" id="message">
                Click to see a message.
            </p>
        </div>
    </div>
</body>

</html>

列印頁面