Tailwind CSS - Pointer Events

Tailwind CSS Pointer Events是一组预定义类，用于控制元素如何处理鼠标事件，让您可以轻松地在设计中启用或禁用指针交互。

Tailwind CSS Pointer Events 指针事件类

以下是用于控制元素上指针事件行为的 Tailwind CSS Pointer Events 指针事件类列表。

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>