Блог

Главная - Вопросы по программированию - Одинаковое положение мыши (x,y) с масштабированием браузера и без него

Одинаковое положение мыши (x,y) с масштабированием браузера и без него

#javascript #html #jquery #css

Вопрос:

Я неопытный программист. Я разработал следующий скрипт для отслеживания положения курсора мыши, соответствующего времени перемещения и номера события. Позже я хочу проанализировать взаимодействие пользователей с различными HTML-элементами (таблицами, разделами, кнопками и т.д.) На упрощенном веб-сайте.

Я хочу, чтобы генерировать данные, которые не искажаются увеличением в нашей функции уменьшения масштаба браузера. Я разработал другие сценарии,которые генерировали различные координаты X, Y для HTML-элементов на основе функции увеличения или уменьшения масштаба.

Поэтому у меня возникла идея измерить относительное положение курсора мыши. В частности, я хотел измерить положение курсора относительно div-элемента с помощью getBoundingClientRect(). Однако теперь я получаю координаты мыши относительно HTML-элемента, на котором расположен курсор (см. Фрагмент кода).

У кого-нибудь есть идея, как изменить сценарий? Моя цель-проанализировать, как долго и как часто пользователь наводил курсор мыши на HTML-элемент или рядом с ним (например, на кнопку, таблицу или изображение).

 var mouse_time;
var mouse_counter = 0;
var mouse_pos_x;
var mouse_pos_y;
var mouse_event = {};


var timesPerSecond = 5;
var wait = false;
var div_element = document.getElementById('tracking')
div_element.addEventListener("mousemove", mouse_tracking, false)

function mouse_tracking(d) {
  if (!wait) {
    mouse_time = Date.now();
    mouse_counter  ;
    var rect = d.target.getBoundingClientRect();
    mouse_pos_x = Math.floor(d.clientX - rect.left);
    mouse_pos_y = Math.floor(d.clientY - rect.top);
    mouse_event = {
      mouse_counter: mouse_counter,
      mouse_time: mouse_time,
      mouse_pos_x: mouse_pos_x,
      mouse_pos_y: mouse_pos_y,
    };

    document.getElementById('show').innerHTML = ('Position X  '   mouse_pos_x   '  Position Y  '   mouse_pos_y);
    console.log(mouse_event);
    wait = true;

    setTimeout(function() {
      wait = false;
    }, 1000 / timesPerSecond);
  }
} 
 #tracking {
  height: 200px;
  width: 200px;
  background-color: lightgreen;
}

#other_content {
  margin: 0 auto;
  background-color: lightpink;
  height: 80px;
  width: 80px;
} 
 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mouse Tracking</title>
</head>

<body>
  <div id="tracking">

    <div id="other_content">Other content</div>

  </div>
  <p id="show"></p>
</body>

</html>
Метки: ,