Как получить положение мыши без событий (без перемещения мыши)?

Question

Можно ли получить позицию мыши с JavaScript после загрузки страницы без какого-либо события перемещения мыши (без перемещения мыши)?

Answer 1

Настоящий ответ: Нет, это невозможно.

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

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

Answer 2

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

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

var cursorX; 
var cursorY; 
document.onmousemove = function(e){ 
    cursorX = e.pageX; 
    cursorY = e.pageY; 
} 
setInterval(checkCursor, 1000); 
function checkCursor(){ 
    alert("Cursor at: " + cursorX + ", " + cursorY); 
} 

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

Answer 3

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; 
} 

Answer 4

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

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

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

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

Answer 5

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

jsfiddle.net/5XzeE/4/

Answer 6

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

var x = null; 
var y = null; 

document.addEventListener('mousemove', onMouseUpdate, false); 
document.addEventListener('mouseenter', onMouseUpdate, false); 

function onMouseUpdate(e) { 
    x = e.pageX; 
    y = e.pageY; 
} 

function getMouseX() { 
    return x; 
} 

function getMouseY() { 
    return y; 
} 

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

Answer 7

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

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

ответа

Answer 8

@ Тим Дауна не производительный, если сделать 2000 х 2000 <a> элементов:

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

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

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

• Шаг 1: Рассмотрят весь экран в качестве исходной области поиска
• Шаг 2: Разделить область поиска в 2 х 2 = 4 прямоугольник <a> элементов
• Шаг 3: Использование функции getComputedStyle() определить, в какой прямоугольник мышь парит
• Шаг 4: Сокращение области поиска для этого прямоугольника и повторить с шага 2.

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

Таким образом, вы создадите максимум 11 x 4 = 44 <a> элементов.

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

Кроме того, создание и уничтожение элементов <a> не выполняется, поскольку DOM, как правило, работает медленно. Вместо этого вы можете просто использовать исходные элементы 4 <a> и просто отрегулировать их top, left, width и height по мере прохождения по шагам.

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

Таким образом, все, что вам нужно, это один <a> элемента изменить свою width и height Максу 11 раз, и изменить его top и left максимум 44 раз, и вы будете иметь точное положение мыши.

Answer 9

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

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

Answer 10

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

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

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

Answer 11

Riffing on @SuperNova's answer, вот подход, использующий классы ES6, который поддерживает контекст для this правильно обратного вызова:

class Mouse { 
 
    constructor() { 
 
    this.x = 0; 
 
    this.y = 0; 
 
    this.callbacks = { 
 
     mouseenter: [], 
 
     mousemove: [], 
 
    }; 
 
    } 
 

 
    get xPos() { 
 
    return this.x; 
 
    } 
 

 
    get yPos() { 
 
    return this.y; 
 
    } 
 

 
    get position() { 
 
    return `${this.x},${this.y}`; 
 
    } 
 

 
    addListener(type, callback) { 
 
    document.addEventListener(type, this); // Pass `this` as the second arg to keep the context correct 
 
    this.callbacks[type].push(callback); 
 
    } 
 

 
    // `handleEvent` is part of the browser's `EventListener` API. 
 
    // https://developer.mozilla.org/en-US/docs/Web/API/EventListener/handleEvent 
 
    handleEvent(event) { 
 
    const isMousemove = event.type === 'mousemove'; 
 
    const isMouseenter = event.type === 'mouseenter'; 
 

 
    if (isMousemove || isMouseenter) { 
 
     this.x = event.pageX; 
 
     this.y = event.pageY; 
 
    } 
 

 
    this.callbacks[event.type].forEach((callback) => { 
 
     callback(); 
 
    }); 
 
    } 
 
} 
 

 
const mouse = new Mouse(); 
 

 
mouse.addListener('mouseenter',() => console.log('mouseenter', mouse.position)); 
 
mouse.addListener('mousemove',() => console.log('mousemove A', mouse.position)); 
 
mouse.addListener('mousemove',() => console.log('mousemove B', mouse.position));