鼠标事件演示

<button id="clickBtn" class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg transition-bg">
    点击我
</button>
<span id="clickCount" class="text-2xl font-bold text-primary">0</span>

// JavaScript
const clickBtn = document.getElementById('clickBtn');
const clickCount = document.getElementById('clickCount');
let count = 0;

clickBtn.addEventListener('click', () => {
    count++;
    clickCount.textContent = count;
    clickBtn.classList.toggle('bg-secondary');
    clickBtn.classList.toggle('bg-primary');
});

<div id="dblclickBox" class="w-20 h-20 bg-secondary rounded-lg cursor-pointer transition-all duration-300"></div>

// JavaScript
const dblclickBox = document.getElementById('dblclickBox');
let isCircle = false;

dblclickBox.addEventListener('dblclick', () => {
    if (isCircle) {
        dblclickBox.classList.remove('rounded-full');
        dblclickBox.classList.add('rounded-lg');
    } else {
        dblclickBox.classList.remove('rounded-lg');
        dblclickBox.classList.add('rounded-full');
    }
    isCircle = !isCircle;
});

<button id="mousedownBtn" class="bg-accent hover:bg-accent/90 text-white px-6 py-3 rounded-lg transition-bg">
    按住我
</button>
<p id="mousedownMsg" class="mt-3 text-accent font-medium hidden">已按下!</p>

// JavaScript
const mousedownBtn = document.getElementById('mousedownBtn');
const mousedownMsg = document.getElementById('mousedownMsg');

mousedownBtn.addEventListener('mousedown', () => {
    mousedownMsg.classList.remove('hidden');
    mousedownBtn.classList.add('bg-accent/80');
});

document.addEventListener('mouseup', () => {
    mousedownMsg.classList.add('hidden');
    mousedownBtn.classList.remove('bg-accent/80');
});

<div id="contextMenuArea" class="w-full h-32 bg-gray-100 rounded-lg flex items-center justify-center cursor-pointer">
    <p class="text-gray-500">右键点击这里</p>
</div>
<div id="customContextMenu" class="fixed bg-white rounded-lg shadow-lg py-2 z-50 hidden">
    <a href="#" class="block px-4 py-2 hover:bg-gray-100 text-gray-800">选项 1</a>
    <a href="#" class="block px-4 py-2 hover:bg-gray-100 text-gray-800">选项 2</a>
    <a href="#" class="block px-4 py-2 hover:bg-gray-100 text-gray-800">选项 3</a>
</div>

// JavaScript
const contextMenuArea = document.getElementById('contextMenuArea');
const customContextMenu = document.getElementById('customContextMenu');

contextMenuArea.addEventListener('contextmenu', (e) => {
    e.preventDefault();
    const { clientX, clientY } = e;
    customContextMenu.style.left = `${clientX}px`;
    customContextMenu.style.top = `${clientY}px`;
    customContextMenu.classList.remove('hidden');
});

document.addEventListener('click', () => {
    customContextMenu.classList.add('hidden');
});

<div id="mousemoveArea" class="w-full h-40 bg-gray-100 rounded-lg relative overflow-hidden">
    <div id="mousemoveDot" class="absolute w-4 h-4 bg-primary rounded-full transform -translate-x-1/2 -translate-y-1/2 opacity-70 hidden"></div>
</div>
<div class="mt-3 flex justify-between text-sm text-gray-600">
    <span>X: <span id="mouseX" class="font-medium">0</span></span>
    <span>Y: <span id="mouseY" class="font-medium">0</span></span>
</div>

// JavaScript
const mousemoveArea = document.getElementById('mousemoveArea');
const mousemoveDot = document.getElementById('mousemoveDot');
const mouseX = document.getElementById('mouseX');
const mouseY = document.getElementById('mouseY');

mousemoveArea.addEventListener('mousemove', (e) => {
    const rect = mousemoveArea.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    
    mouseX.textContent = Math.round(x);
    mouseY.textContent = Math.round(y);
    
    mousemoveDot.style.left = `${x}px`;
    mousemoveDot.style.top = `${y}px`;
    mousemoveDot.classList.remove('hidden');
});

mousemoveArea.addEventListener('mouseleave', () => {
    mousemoveDot.classList.add('hidden');
});

<div id="hoverElement1" class="w-20 h-20 bg-blue-100 rounded-lg flex items-center justify-center cursor-pointer transition-all">
    <span class="text-blue-600 font-medium">1</span>
</div>
<div id="hoverElement2" class="w-20 h-20 bg-green-100 rounded-lg flex items-center justify-center cursor-pointer transition-all">
    <span class="text-green-600 font-medium">2</span>
</div>
<div id="hoverElement3" class="w-20 h-20 bg-yellow-100 rounded-lg flex items-center justify-center cursor-pointer transition-all">
    <span class="text-yellow-600 font-medium">3</span>
</div>
<p id="hoverStatus" class="mt-4 text-gray-600">悬停在方块上查看状态</p>

// JavaScript
const hoverElement1 = document.getElementById('hoverElement1');
const hoverElement2 = document.getElementById('hoverElement2');
const hoverElement3 = document.getElementById('hoverElement3');
const hoverStatus = document.getElementById('hoverStatus');

hoverElement1.addEventListener('mouseover', () => {
    hoverElement1.classList.add('scale-110', 'shadow-lg', 'bg-blue-200');
    hoverStatus.textContent = '悬停在元素 1 上';
});

hoverElement1.addEventListener('mouseout', () => {
    hoverElement1.classList.remove('scale-110', 'shadow-lg', 'bg-blue-200');
    hoverStatus.textContent = '悬停在方块上查看状态';
});

// 类似地为 hoverElement2 和 hoverElement3 添加事件监听...

<div id="mouseEnterArea" class="w-full h-40 bg-gray-100 rounded-lg flex items-center justify-center p-4">
    <div id="nestedElement" class="w-32 h-32 bg-accent/20 rounded-lg flex items-center justify-center">
        <p class="text-accent text-center text-sm">嵌套元素</p>
    </div>
</div>
<p id="enterLeaveStatus" class="mt-3 text-gray-600">状态: 等待交互...</p>

// JavaScript
const mouseEnterArea = document.getElementById('mouseEnterArea');
const nestedElement = document.getElementById('nestedElement');
const enterLeaveStatus = document.getElementById('enterLeaveStatus');

mouseEnterArea.addEventListener('mouseenter', () => {
    mouseEnterArea.classList.add('bg-gray-200');
    enterLeaveStatus.textContent = '状态: 鼠标进入外层区域';
});

mouseEnterArea.addEventListener('mouseleave', () => {
    mouseEnterArea.classList.remove('bg-gray-200');
    enterLeaveStatus.textContent = '状态: 鼠标离开外层区域';
});

nestedElement.addEventListener('mouseenter', () => {
    nestedElement.classList.add('bg-accent/30');
    enterLeaveStatus.textContent = '状态: 鼠标进入内层区域';
});

nestedElement.addEventListener('mouseleave', () => {
    nestedElement.classList.remove('bg-accent/30');
    enterLeaveStatus.textContent = '状态: 鼠标离开内层区域';
});

<div id="wheelElement" class="w-24 h-24 bg-danger/20 rounded-lg flex items-center justify-center mx-auto mt-4 transition-transform">
    <span id="scaleValue" class="text-danger font-bold text-xl">100%</span>
</div>

// JavaScript
const wheelElement = document.getElementById('wheelElement');
const scaleValue = document.getElementById('scaleValue');
let scale = 1;

wheelElement.addEventListener('wheel', (e) => {
    e.preventDefault();
    if (e.deltaY < 0) {
        // 向上滚动 - 放大
        scale = Math.min(scale + 0.1, 2);
    } else {
        // 向下滚动 - 缩小
        scale = Math.max(scale - 0.1, 0.5);
    }
    wheelElement.style.transform = `scale(${scale})`;
    scaleValue.textContent = `${Math.round(scale * 100)}%`;
});