Получить позицию мыши в Javascript без использования события onmousemove [duplicate]

Ответ @Tim Down не работает, если вы выставляете 2 000 x 2000 & lt; a & gt; элементов:

ОК, я только что подумал об этом. Наложите свою страницу на div, который охватывает весь документ. Внутри этого, создайте (скажем) 2000 x 2000 элементов (чтобы псевдо-класс: hover работал в IE 6, см.), Каждый размером 1 пиксель. Создайте правило CSS: hover для тех элементов, которые изменяют свойство (скажем, семейство шрифтов). В вашем обработчике нагрузки пройдите через каждый из 4 миллионов элементов, проверяя currentStyle / getComputedStyle (), пока не найдете ту, которая имеет шрифт зависания. Экстраполируйте назад этот элемент, чтобы получить координаты внутри документа.

N.B. НЕ ДЕЛАЙТЕ ЭТО.

Но вам не нужно отображать 4 миллиона элементов одновременно, вместо этого используйте бинарный поиск. Просто используйте 4 & lt; a & gt; элементы:

• Шаг 1: Рассмотрите весь экран как начальную область поиска
• Шаг 2: Разделить область поиска в 2 x 2 = 4 прямоугольника & lt; a & gt; элементы
• Шаг 3: Используя функцию getComputedStyle () , определите, в какой прямоугольной мышке hovers
• Шаг 4: Уменьшите область поиска до этого прямоугольника и повторите с шага 2.

Таким образом, вам нужно будет повторить эти шаги максимум 11 раз, учитывая ваши экран не шире 2048px.

Итак, вы создадите максимум 11 x 4 = 44 & lt; a & gt; элементов.

Если вам не нужно чтобы определить положение мыши точно в пикселе, но, как говорят, точность 10 пикселей. Вы повторите шаги не более 8 раз, поэтому вам нужно будет нарисовать max 8 x 4 = 32 & lt; a & gt; элементов.

Также генерировать и затем уничтожать & lt; a & gt; не выполняется, поскольку DOM обычно медленный. Вместо этого вы можете просто повторно использовать исходные 4 & lt; a & gt; элементы и просто отрегулировать их верх , влево , width и height , когда вы выполняете шаги.

Теперь создание 4 & lt; a & gt; также является излишним. Вместо этого вы можете использовать один и тот же элемент & lt; a & gt; для тестирования для getComputedStyle () в каждом прямоугольнике. Таким образом, вместо разделения области поиска на 2 x 2 & lt; a & gt; элементы просто повторно используют один элемент & lt; a , перемещая его с помощью top и left .

Итак, все, что вам нужно, это один элемент & lt; a & gt; изменить его ширину и height не более 11 раз, а верхняя верхняя и оставлена ​​ max 44 раза, и вы будете иметь точную позицию мыши.

  var x = 0;  var y = 0;  document.addEventListener ('mousemove', onMouseMove, false) function onMouseMove (e) {x = e.clientX;  y = e.clientY;  } function getMouseX () {return x;  } function getMouseY () {return y;  }  

Что вы можете сделать, это создать переменные для координат x и y вашего курсора, обновлять их всякий раз, когда мышь перемещается и вызывать функцию на интервал, чтобы сделать то, что вам нужно сохранить сохраненную позицию.

Недостатком этого является то, что для его работы требуется хотя бы одно начальное движение мыши. Пока курсор обновляет свое положение хотя бы один раз, мы можем найти его положение независимо от того, будет ли он двигаться снова.

  var cursorX;  var cursorY;  document.onmousemove = function (e) {cursorX = e.pageX;  cursorY = e.pageY;  } setInterval (checkCursor, 1000);  function checkCursor () {alert ("Курсор в:" + cursorX + "," + cursorY);  }  

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

Вам не нужно перемещать мышь, чтобы получить местоположение курсора. Местоположение также сообщается о событиях, отличных от mousemove. Вот пример click-event:

  document.body.addEventListener ('click', function (e) {console.log ("cursor-location:" + e.clientX + '  , '+ e.clientY);});   

Вы можете попробовать что-то похожее на то, что предложил Тим Даун, но вместо того, чтобы иметь элементы для каждого пикселя на экране, создайте всего 2-4 элемента (ячейки) и измените их местоположение, ширину и высоту динамически, чтобы разделить все возможное места на экране на 2-4 рекурсивно, таким образом быстро обнаруживая реальное местоположение мыши.

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

Riffing on @ ответ SuperNova , вот подход с использованием классов ES6, который поддерживает контекст для , этот правильный в вашем обратном вызове:

Самое простое решение, но не на 100% точное

  $ (': hover'). last (). offset ()  

Результат: {top: 148, left: 62.5} Результат зависит от размера ближайшего элемента и возвращает undefined , когда пользователь переключил вкладку

Вы также можете зацепить mouseenter (это событие запускается после перезагрузки страницы, когда мышка находится внутри страницы). Расширение кода Corrupted должно делать трюк:

Вы также можете установить x и y в значение null на mouseleave-event. Таким образом, вы можете проверить, находится ли пользователь на вашей странице с помощью курсора.

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

Вы можете использовать код JHarding на своей родительской странице, чтобы последняя позиция была всегда доступно в глобальной переменной:

  var cursorX;  var cursorY;  document.onmousemove = function (e) {cursorX = e.pageX;  cursorY = e.pageY;  }  

Это не поможет пользователям перейти на эту страницу, отличную от родительской.

Я выполнил горизонтальный / вертикальный поиск (сначала сделайте div, полный вертикальных линий, расположенных горизонтально, затем сделайте div, полный горизонтальных линий, расположенных вертикально, и просто посмотрите, какой из них имеет состояние зависания), как идея Тима Дауна выше, и он работает довольно быстро. К сожалению, не работает на Chrome 32 в KDE.

jsfiddle.net/5XzeE/4 /