Создание сайтов - MD².Ru
+7 (999) 919-32-46

Трекер координат мыши - Мониторинг и анализ взаимодействий в веб-приложениях

Трекер координат мыши - Мониторинг и анализ взаимодействий в веб-приложениях

Веб-разработка часто требует точного понимания взаимодействия пользователя с интерфейсом. Один из ключевых аспектов — работа с координатами мыши, которые позволяют отслеживать движение курсора и действия пользователя, такие как клики. В этой статье мы рассмотрим Трекер координат мыши — веб-инструмент, созданный для мониторинга положения курсора и записи кликов в реальном времени. Мы разберем его функциональность, структуру, возможные применения и предложим реализацию недостающего JavaScript-кода.

// Глобальная переменная для отслеживания состояния
let isTracking = false;

// Запуск отслеживания
function startTracking() {
  isTracking = true;
  document.addEventListener('mousemove', updateCoordinates);
  document.addEventListener('click', logClick);
  document.getElementById('status').textContent = 'Отслеживание активно';
}

// Остановка отслеживания
function stopTracking() {
  isTracking = false;
  document.removeEventListener('mousemove', updateCoordinates);
  document.removeEventListener('click', logClick);
  document.getElementById('status').textContent = 'Отслеживание остановлено';
}

// Обновление координат
function updateCoordinates(event) {
  if (!isTracking) return;
  document.getElementById('screenX').textContent = event.screenX;
  document.getElementById('screenY').textContent = event.screenY;
  document.getElementById('clientX').textContent = event.clientX;
  document.getElementById('clientY').textContent = event.clientY;
  document.getElementById('pageX').textContent = event.pageX;
  document.getElementById('pageY').textContent = event.pageY;
}

// Логирование кликов
function logClick(event) {
  const log = document.getElementById('clickLog');
  log.textContent += `Клик: screen(${event.screenX}, ${event.screenY}), client(${event.clientX}, ${event.clientY}), page(${event.pageX}, ${event.pageY})\n`;
}

// Очистка лога
function clearLog() {
  document.getElementById('clickLog').textContent = 'Лог кликов появится здесь...';
}

Трекер координат мыши — это HTML-приложение с простым интерфейсом, которое отображает координаты курсора в трех системах: экранной, оконной и страничной. Инструмент включает панель управления для запуска и остановки отслеживания, а также функцию ведения лога кликов.  Сохраните HTML-код в файл (например, mouse_coordinates_tracker.html).

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Трекер координат мыши</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            min-height: 100vh;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.1);
            padding: 30px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
        }
        
        h1 {
            text-align: center;
            margin-bottom: 30px;
            font-size: 2.5em;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        
        .coords-display {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .coord-box {
            background: rgba(255, 255, 255, 0.2);
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .coord-label {
            font-size: 0.9em;
            opacity: 0.8;
            margin-bottom: 5px;
        }
        
        .coord-value {
            font-size: 1.8em;
            font-weight: bold;
            color: #FFD700;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        }
        
        .controls {
            display: flex;
            gap: 15px;
            justify-content: center;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }
        
        button {
            padding: 12px 24px;
            font-size: 16px;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
            min-width: 120px;
        }
        
        .start-btn {
            background: #4CAF50;
            color: white;
        }
        
        .start-btn:hover {
            background: #45a049;
            transform: translateY(-2px);
        }
        
        .stop-btn {
            background: #f44336;
            color: white;
        }
        
        .stop-btn:hover {
            background: #da190b;
            transform: translateY(-2px);
        }
        
        .clear-btn {
            background: #FF9800;
            color: white;
        }
        
        .clear-btn:hover {
            background: #e68900;
            transform: translateY(-2px);
        }
        
        .log {
            background: rgba(0, 0, 0, 0.3);
            padding: 20px;
            border-radius: 10px;
            max-height: 300px;
            overflow-y: auto;
            font-family: 'Courier New', monospace;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .log-entry {
            margin-bottom: 5px;
            padding: 5px;
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.1);
        }
        
        .status {
            text-align: center;
            font-size: 1.2em;
            margin-bottom: 20px;
            padding: 10px;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.1);
        }
        
        .active {
            background: rgba(76, 175, 80, 0.3) !important;
            border: 1px solid #4CAF50;
        }
        
        .inactive {
            background: rgba(244, 67, 54, 0.3) !important;
            border: 1px solid #f44336;
        }
        
        .crosshair {
            position: fixed;
            pointer-events: none;
            z-index: 9999;
            display: none;
        }
        
        .crosshair::before,
        .crosshair::after {
            content: '';
            position: absolute;
            background: #ff0000;
        }
        
        .crosshair::before {
            width: 20px;
            height: 2px;
            left: -10px;
            top: -1px;
        }
        
        .crosshair::after {
            width: 2px;
            height: 20px;
            left: -1px;
            top: -10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>???? Трекер координат мыши</h1>
        
        <div class="status inactive" id="status">
            Отслеживание остановлено
        </div>
        
        <div class="coords-display">
            <div class="coord-box">
                <div class="coord-label">Координаты на экране</div>
                <div class="coord-value" id="screen-coords">X: 0, Y: 0</div>
            </div>
            <div class="coord-box">
                <div class="coord-label">Координаты в окне</div>
                <div class="coord-value" id="client-coords">X: 0, Y: 0</div>
            </div>
            <div class="coord-box">
                <div class="coord-label">Координаты на странице</div>
                <div class="coord-value" id="page-coords">X: 0, Y: 0</div>
            </div>
        </div>
        
        <div class="controls">
            <button class="start-btn" onclick="startTracking()">▶ Начать отслеживание</button>
            <button class="stop-btn" onclick="stopTracking()">⏹ Остановить</button>
            <button class="clear-btn" onclick="clearLog()">???? Очистить лог</button>
        </div>
        
        <div class="log" id="log">
            <div style="text-align: center; opacity: 0.7;">Лог кликов появится здесь...</div>
        </div>
    </div>
    
    <div class="crosshair" id="crosshair"></div>

    <script>
        let isTracking = false;
        let clickCount = 0;
        
        // Элементы DOM
        const status = document.getElementById('status');
        const screenCoords = document.getElementById('screen-coords');
        const clientCoords = document.getElementById('client-coords');
        const pageCoords = document.getElementById('page-coords');
        const log = document.getElementById('log');
        const crosshair = document.getElementById('crosshair');
        
        // Обновление координат при движении мыши
        function updateMousePosition(event) {
            if (!isTracking) return;
            
            screenCoords.textContent = `X: ${event.screenX}, Y: ${event.screenY}`;
            clientCoords.textContent = `X: ${event.clientX}, Y: ${event.clientY}`;
            pageCoords.textContent = `X: ${event.pageX}, Y: ${event.pageY}`;
            
            // Обновление позиции перекрестия
            crosshair.style.left = event.clientX + 'px';
            crosshair.style.top = event.clientY + 'px';
        }
        
        // Обработка кликов
        function handleClick(event) {
            if (!isTracking) return;
            
            clickCount++;
            const time = new Date().toLocaleTimeString();
            const logEntry = document.createElement('div');
            logEntry.className = 'log-entry';
            logEntry.innerHTML = `
                <strong>Клик #${clickCount}</strong> в ${time}<br>
                ???? Экран: X=${event.screenX}, Y=${event.screenY}<br>
                ???? Окно: X=${event.clientX}, Y=${event.clientY}<br>
                ???? Страница: X=${event.pageX}, Y=${event.pageY}
            `;
            
            log.insertBefore(logEntry, log.firstChild);
            
            // Ограничиваем количество записей в логе
            if (log.children.length > 50) {
                log.removeChild(log.lastChild);
            }
        }
        
        // Запуск отслеживания
        function startTracking() {
            if (isTracking) return;
            
            isTracking = true;
            status.textContent = '???? Отслеживание активно - двигайте мышью и кликайте!';
            status.className = 'status active';
            crosshair.style.display = 'block';
            
            document.addEventListener('mousemove', updateMousePosition);
            document.addEventListener('click', handleClick);
        }
        
        // Остановка отслеживания
        function stopTracking() {
            if (!isTracking) return;
            
            isTracking = false;
            status.textContent = '???? Отслеживание остановлено';
            status.className = 'status inactive';
            crosshair.style.display = 'none';
            
            document.removeEventListener('mousemove', updateMousePosition);
            document.removeEventListener('click', handleClick);
        }
        
        // Очистка лога
        function clearLog() {
            log.innerHTML = '<div style="text-align: center; opacity: 0.7;">Лог кликов появится здесь...</div>';
            clickCount = 0;
        }
        
        // Горячие клавиши
        document.addEventListener('keydown', function(event) {
            if (event.ctrlKey && event.key === ' ') {
                event.preventDefault();
                if (isTracking) {
                    stopTracking();
                } else {
                    startTracking();
                }
            } else if (event.key === 'Escape') {
                stopTracking();
            } else if (event.ctrlKey && event.key === 'Delete') {
                clearLog();
            }
        });
        
        // Информация о горячих клавишах
        console.log('???? Горячие клавиши:');
        console.log('Ctrl + Пробел - Включить/выключить отслеживание');
        console.log('Escape - Остановить отслеживание');
        console.log('Ctrl + Delete - Очистить лог');
    </script>
</body>
</html>

Трекер координат мыши — это мощный и доступный инструмент для веб-разработчиков, аналитиков и преподавателей. Его простота и универсальность делают его идеальным для отладки, обучения и анализа пользовательского взаимодействия. Реализация на JavaScript позволяет легко адаптировать трекер под конкретные задачи, будь то прототипирование или сбор данных для UX-исследований. Попробуйте интегрировать этот инструмент в свой следующий проект и откройте новые возможности для работы с веб-интерфейсами!

Отзывы (0)

Написать отзыв

Примечание: HTML разметка не поддерживается! Используйте обычный текст.
    Плохо           Хорошо