Как получить позицию мыши в jQuery без событий мыши?


101

Я хотел бы получить текущую позицию мыши, но не хочу использовать:

$(document).bind('mousemove',function(e){ 
        $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY); 
}); 

потому что мне просто нужно получить позицию и обработать информацию


3
.pageX и .pageY могут быть прочитаны из любого события, а не только из .mousemove (). Например, возможно, вы хотите точно знать, где пользователь щелкнул внутри определенного div: Вот пример, в котором мы прослушиваем событие щелчка внутри определенного div с именем #special. ..... docs.jquery.com/…
Хаим Евги

это также может помочь вам определить местоположение указателя мыши для отзывчивых сайтов. kvcodes.com/2014/03/…
Kvvaradha

Ответы:


151

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

jQuery(function($) {
    var currentMousePos = { x: -1, y: -1 };
    $(document).mousemove(function(event) {
        currentMousePos.x = event.pageX;
        currentMousePos.y = event.pageY;
    });

    // ELSEWHERE, your code that needs to know the mouse position without an event
    if (currentMousePos.x < 10) {
        // ....
    }
});

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


7
$(window).load(function(e){ console.log(e.pageX,e.pageY); });возвращает undefined для позиции мыши
spb

9
@TJCrowder Довольно очевидно, я думаю, он говорит, что есть событие, которое не предоставляет позицию мыши, чтобы ответить на ответ, утверждающий, что «почти все (все?)» События предоставляют позицию мыши.
fabspro 07

2
В защите @TJCrowder он СКАЗАЛ ПОЧТИ все. Ответив тем, что не так полезно или целеустремленно. Я думаю, что смысл этого ответа показывает пользователю, что в его примере ему не нужно использовать перемещение мыши ... он может использовать что угодно. Пользователь специально не сказал получать его без события, на что TJCrowder указывает, что почти ВЕСЬ код происходит после НЕКОТОРЫХ событий. Конечно, он упоминает об этом ПОСЛЕ, показывая жизнеспособный способ сделать вашу собственную функцию, которая будет делать то, что ему нужно. Ответ мне все равно помог.
Тайлер

1
@ Тайлер: Спасибо. :-) «почти все» было последующим изменением, мой первоначальный язык был слишком сильным.
TJ Crowder

26

Вы не можете прочитать позицию мыши в jQuery без использования события. Прежде всего отметим, чтоevent.pageX и event.pageYсвойства существует на любом случае, так что вы можете сделать:

$('#myEl').click(function(e) {
    console.log(e.pageX);
});

Другой вариант - использовать закрытие, чтобы предоставить всему вашему коду доступ к переменной, которая обновляется обработчиком mousemove:

var mouseX, mouseY;
$(document).mousemove(function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
}).mouseover(); // call the handler immediately

// do something with mouseX and mouseY

Одна из проблем заключается в том, что у вас нет pageX и pageY или clientX и clientY при перетаскивании в firefox ... Каким способом получить pageY при перетаскивании?
JamesTBennett

11

Я использовал такой способ:

$(document).mousemove(function(e) {
    window.x = e.pageX;
    window.y = e.pageY;
});

function show_popup(str) {
    $("#popup_content").html(str);
    $("#popup").fadeIn("fast");
    $("#popup").css("top", y);
    $("#popup").css("left", x);
}

Таким образом, расстояние от вершины всегда сохраняется в y, а расстояние от левого края - в x.


6

Более того, mousemoveсобытия не запускаются, если вы выполняете перетаскивание через окно браузера. Чтобы отслеживать координаты мыши во время перетаскивания, вы должны прикрепить обработчик для document.ondragoverсобытия и использовать его свойство originalEvent.

Пример:

var globalDragOver = function (e)
{
    var original = e.originalEvent;
    if (original)
    {
        window.x = original.pageX;
        window.y = original.pageY;
    }
}


0
var CurrentMouseXPostion;
var CurrentMouseYPostion;

$(document).mousemove(function(event) {
    CurrentMouseXPostion = event.pageX;
    CurrentMouseYPostion = event.pageY;
});

Создайте eventListener для основного объекта, в моем случае для объекта документа, чтобы мышь координировала каждый кадр и сохраняла их в глобальных переменных, и, таким образом, вы можете читать данные мыши Y & Z, когда захотите, где захотите.


-1

Я наткнулся на это, хотелось бы поделиться ...

Что, вы парни, думаете?

$(document).ready(function() {
  window.mousemove = function(e) {
    p = $(e).position();  //remember $(e) - could be any html tag also.. 
    left = e.left;        //retrieving the left position of the div... 
    top = e.top;          //get the top position of the div... 
  }
});

и бум, вот оно ..

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.