JavaScript随机位置鼠标点击检测功能的实现方案

<div class="container mx-auto px-4 py-8">
    <!-- 标题区域 -->
    <header class="mb-8 text-center">
        <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-gray-800 mb-2">随机位置鼠标点击检测</h1>
        <p class="text-gray-600 max-w-2xl mx-auto">点击页面上的任意位置，系统会记录并显示你的点击坐标</p>
    </header>

    <!-- 信息面板 -->
    <div id="info-panel" class="bg-white rounded-xl shadow-md p-6 mb-6 max-w-2xl mx-auto">
        <!-- 信息面板内容 -->
    </div>

    <!-- 点击区域 -->
    <div id="click-area" class="bg-white rounded-xl shadow-lg h-[50vh] w-full relative overflow-hidden">
        <div class="absolute inset-0 flex items-center justify-center text-gray-300">
            <p>在此区域内任意位置点击</p>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="bg-gray-50 p-4 rounded-lg">
        <p class="text-gray-600 text-sm mb-1">最后点击 X 坐标</p>
        <p id="last-x" class="text-2xl font-bold text-primary">0</p>
    </div>
    <div class="bg-gray-50 p-4 rounded-lg">
        <p class="text-gray-600 text-sm mb-1">最后点击 Y 坐标</p>
        <p id="last-y" class="text-2xl font-bold text-primary">0</p>
    </div>
    <div class="bg-gray-50 p-4 rounded-lg md:col-span-2">
        <p class="text-gray-600 text-sm mb-1">点击历史</p>
        <div id="click-history" class="h-32 overflow-y-auto text-sm text-gray-700 space-y-1">
            <p class="text-gray-400 italic">尚未有点击</p>
        </div>
    </div>
</div>

#click-area {
    position: relative;
}

.click-marker {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #8B5CF6;
    border-radius: 50%;
}

tailwind.config = {
    theme: {
        extend: {
            colors: {
                primary: '#3B82F6',
                secondary: '#10B981',
                accent: '#8B5CF6',
            },
            fontFamily: {
                inter: ['Inter', 'sans-serif'],
            },
        }
    }
}

// 获取DOM元素
const clickArea = document.getElementById('click-area');
const lastXElement = document.getElementById('last-x');
const lastYElement = document.getElementById('last-y');
const clickHistory = document.getElementById('click-history');

// 记录点击次数
let clickCount = 0;

function handleClick(event) {
    // 获取相对于点击区域的坐标
    const rect = clickArea.getBoundingClientRect();
    const x = Math.round(event.clientX - rect.left);
    const y = Math.round(event.clientY - rect.top);

    // 更新最后点击坐标显示
    lastXElement.textContent = x;
    lastYElement.textContent = y;

    // 增加点击计数
    clickCount++;

    // 添加到历史记录
    addToHistory(x, y);

    // 创建点击标记
    createClickMarker(x, y);

    // 在控制台输出坐标
    console.log(`点击位置: X=${x}, Y=${y}`);
}

function addToHistory(x, y) {
    // 清除"尚未有点击"提示
    if (clickCount === 1) {
        clickHistory.innerHTML = '';
    }

    const historyItem = document.createElement('p');
    historyItem.className = 'flex justify-between items-center';
    historyItem.innerHTML = `
        <span>第 ${clickCount} 次点击</span>
        <span class="font-medium">X: ${x}, Y: ${y}</span>
    `;

    // 添加到历史记录顶部
    clickHistory.insertBefore(historyItem, clickHistory.firstChild);
}

function createClickMarker(x, y) {
    const marker = document.createElement('div');
    marker.className = 'click-marker';
    marker.style.left = `${x}px`;
    marker.style.top = `${y}px`;

    // 添加到点击区域
    clickArea.appendChild(marker);

    // 2秒后移除标记
    setTimeout(() => {
        setTimeout(() => {
            marker.remove();
        }, 300);
    }, 2000);
}

// 为整个点击区域添加点击事件监听
clickArea.addEventListener('click', handleClick);