Jak uzyskać pozycję myszy w jQuery bez zdarzeń myszy?

101

Chciałbym sprawdzić aktualną pozycję myszy, ale nie chcę używać:

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

ponieważ muszę tylko znaleźć stanowisko i przetworzyć informacje

jquery mouse position

— Martin Vseticka
źródło

3

.pageX i .pageY można odczytać z dowolnego zdarzenia, nie tylko .mousemove (). Na przykład, być może chcesz dokładnie wiedzieć, gdzie użytkownik kliknął wewnątrz określonego elementu div: Oto przykład, w którym nasłuchujemy zdarzenia kliknięcia wewnątrz określonego elementu div o nazwie #special. ..... docs.jquery.com/…

— Haim Evgi

może to również pomóc w znalezieniu lokalizacji wskaźnika myszy dla responsywnych witryn. kvcodes.com/2014/03/…

— Kvvaradha

151

Nie sądzę, aby można było zapytać o pozycję myszy, ale można użyć mousemovemodułu obsługi, który po prostu przechowuje informacje, aby można było zapytać o przechowywane informacje.

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

Ale prawie cały kod, inny niż setTimeoutkod i tym podobne, jest uruchamiany w odpowiedzi na zdarzenie, a większość zdarzeń zapewnia położenie myszy. Twój kod, który musi wiedzieć, gdzie jest mysz, prawdopodobnie ma już dostęp do tych informacji ...

— TJ Crowder
źródło

7

$(window).load(function(e){ console.log(e.pageX,e.pageY); });zwraca undefined dla pozycji myszy

— spb,

9

@TJCrowder Dość oczywiste Myślę, że mówi on, że istnieje zdarzenie, które nie podaje pozycji myszy, aby odpowiedzieć na odpowiedź, twierdząc, że „prawie wszystkie (wszystkie?)” Zdarzenia zapewniają pozycję myszy.

— fabspro

2

W obronie @TJCrowder powiedział PRAWIE wszystko. Odpowiadając takim, który nie jest zbyt pomocny ani celowy. Myślę, że celem tej odpowiedzi jest pokazanie użytkownikowi, że w swoim przykładzie nie musi on poruszać się myszą ... może użyć wszystkiego. Użytkownik nie powiedział konkretnie, że otrzyma go bez zdarzenia, na co TJCrowder wskazuje, że prawie CAŁY kod ma miejsce po NIEKTÓRYM zdarzeniu. Oczywiście wspomina o tym PO pokazaniu realnego sposobu na stworzenie własnej funkcji, która robi to, czego potrzebuje. Odpowiedź i tak mi pomogła.

— Tyler,

1

@Tyler: Dzięki. :-) „prawie wszystko” to kolejna zmiana, mój język początkowy był zbyt mocny.

— TJ Crowder,

26

Nie możesz odczytać pozycji myszy w jQuery bez użycia zdarzenia. Po pierwsze, zwróć uwagę, że właściwości event.pageXi event.pageYistnieją w każdym zdarzeniu, więc możesz:

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

Inną opcją jest użycie zamknięcia, aby dać całemu kodowi dostęp do zmiennej, która jest aktualizowana przez moduł obsługi myszy:

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

// do something with mouseX and mouseY

— samotny dzień
źródło

Jednym z problemów jest to, że nie masz pageX i pageY ani clientX i clientY podczas przeciągania w przeglądarce Firefox ... Czy jest jakiś sposób, aby uzyskać pageY podczas przeciągania?

— JamesTBennett

11

Użyłem tej metody:

$(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);
}

W ten sposób odległość od góry będzie zawsze zapisywana w y, a odległość od lewej w x.

— Nicu Criste
źródło

6

Co więcej, mousemovezdarzenia nie są wyzwalane, jeśli wykonasz drag'n'drop w oknie przeglądarki. Aby śledzić współrzędne myszy podczas drag'n'drop, należy dołączyć handler document.ondragoverzdarzenia i użyć jego właściwości originalEvent.

Przykład:

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

— Alfishe
źródło

2

wykorzystanie window.event- zawiera ostatnie eventi jak każdy eventzawiera pageX, pageYitp. Działa dla Chrome, Safari, IE ale nie FF.

— Oleksandr Tsurika
źródło

0

var CurrentMouseXPostion;
var CurrentMouseYPostion;

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

Utwórz obiekt eventListener na głównym obiekcie, w moim przypadku na obiekcie dokumentu, aby uzyskać współrzędne myszy w każdej klatce i przechowywać je w zmiennych globalnych, i tak możesz czytać myszy Y i Z, kiedy tylko chcesz, gdziekolwiek chcesz.

— Ala Mouhamed
źródło

-1

Trafiłem na to, więc byłoby miło się podzielić ...

Co o tym myślicie?

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

i bum, mamy to ..

— Ande Caleb
źródło