Як отримати позицію миші в jQuery без подій миші?

101

Я хотів би отримати поточне положення миші, але я не хочу використовувати:

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

тому що мені просто потрібно отримати позицію та обробити інформацію

jquery mouse position

— Мартін Всетічка
джерело

3

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

— Хаїм Евгі

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

— Квадраджа

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коду та подібного, працює у відповідь на подію, і більшість подій забезпечують положення миші. Тож ваш код, який повинен знати, де миша, ймовірно, вже має доступ до цієї інформації ...

— TJ Crowder
джерело

7

$(window).load(function(e){ console.log(e.pageX,e.pageY); });повертається невизначено для позиції миші

— spb

9

@TJCrowder Дуже очевидно, я думаю, він говорить, що там є подія, яка не забезпечує положення миші, щоб відповісти на відповідь, стверджуючи, що майже всі (усі?) Події забезпечують позицію миші.

— fabspro

2

У захисті @TJCrowder він НЕ СКАЗУВАННЯ ВСІХ. Відповідаючи на те, що не все так корисно чи цілеспрямовано. Я думаю, сенс цієї відповіді полягає в тому, щоб показати користувачеві, що в своєму прикладі йому не потрібно використовувати рух миші ... він може використовувати що завгодно. Користувач конкретно не сказав, що отримати це без події, що TJCrowder зазначає, що майже ВСІЙ код відбувається після ДЕЯКОЇ події. Звичайно, він згадує це ПІСЛЯ, показуючи життєздатний спосіб зробити власну функцію, яка робить те, що йому потрібно. Відповідь мені все одно допомогла.

— Тайлер

1

@Tyler: Дякую :-) "майже всі" були наступними змінами, моя початкова мова була занадто сильною.

— TJ Crowder

26

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

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

Вашим іншим варіантом є використання закриття, щоб надати всьому коду доступ до змінної, що оновлюється обробником миші:

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 ... Будь-який спосіб отримати сторінку Y під час перетягування?

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

— Альфіше
джерело

2

використання window.event- він містить в минулому , eventі як будь-який eventмістить pageX, і pageYт.д. Роботи для Chrome, Safari, IE , але не FF.

— Олександр Цуріка
джерело

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

і бум, там ми це маємо ..

— Анде Калеб
джерело