javascript pobiera współrzędne X i Y po kliknięciu myszy

Mam mały tag div, który po kliknięciu (onClick) uruchomi funkcję printMousePos(). Jest to HTML tags:javascript pobiera współrzędne X i Y po kliknięciu myszy

<html> 
    <header> 
     <!-- By the way, this is not the actual html file, just a generic example. --> 
     <script src='game.js'></script> 
    </header> 
    <body> 
     <div id="example"> 
      <p id="test">x: , y:</p> 
     </div> 
    </body> 
</html>

Jest to funkcja printMousePos w osobnym pliku .js:

function printMousePos() { 
    var cursorX; 
    var cursorY; 
    document.onmousemove = function(e){ 
    cursorX = e.pageX; 
    cursorY = e.pageY; 
} 
    document.getElementById('test').innerHTML = "x: " + cursorX + ", y: " + cursorY; 
}

Tak, funkcja faktycznie działa (nie wie po kliknięciu go i wszystkie) ale zwraca undefined zarówno dla x, jak i dla y, więc zakładam, że kod get x i y w funkcji jest niepoprawny. Jakieś pomysły? Wiem również, że nie ma żadnych wbudowanych funkcji w obrębie samego javascript, aby zwrócić x i y jak w java, ex .. czy byłby sposób, aby to zrobić z powiedzeniem JQuery lub php? (Unikaj tych, jeśli to możliwe, najlepiej javascript). Dzięki!

Źródło

2014-05-19 Bryce Hahn

'event.clientX' i' event.clientY' – Jonathan

@ Jonathan Próbowałem tego, stil l zwraca nieokreślone. –

KursorX i kursorY są niezdefiniowane przed wywołaniem zdarzenia ruchu myszy. Jeśli chcesz, aby pozycja od zdarzenia przejścia zdarzenia kliknięcia do funkcji printMousePos – Mathias

Podoba mi się to.

function printMousePos(event) { 
 
    document.body.textContent = 
 
    "clientX: " + event.clientX + 
 
    " - clientY: " + event.clientY; 
 
} 
 

 
document.addEventListener("click", printMousePos);

MouseEvent - MDN

MouseEvent.clientX Czytaj tylko
Współrzędna x kursora myszy w lokalnych (zawartość DOM) koordynuje.

MouseEvent.clientY Czytaj tylko
współrzędna Y położenia kursora myszy w lokalnych (zawartość DOM) koordynuje.

Źródło

2014-05-19 18:30:45 Jonathan

Re: [pageX/Y vs. clientX/Y] (http://www.bennadel.com/blog/1869-jquery-mouse-events-pagex -y-vs-clientx-y.htm) – Kylok

To jest poprawna odpowiedź i powinna być oznaczona jako tak –

Wygląda swojej funkcji printMousePos powinien:

Pobierz współrzędne X i Y myszki
Dodaj te wartości do HTML

Obecnie robi to:

Tworzy (niezdefiniowane) zmienne dla współrzędne X i Y myszy myszy Przypisują funkcję do zdarzenia "mousemove" (która ustawi te zmienne na współrzędne myszy po wywołaniu przez ruch myszy)
Dodaje bieżące wartości zmiennych do kodu HTML

Zobacz problem? Twoje zmienne nigdy się nie ustawiają, ponieważ zaraz po dodaniu funkcji do zdarzenia "mousemove" je drukujesz.

Wygląda na to, że prawdopodobnie nie potrzebujesz zdarzenia mousemove; Chciałbym spróbować czegoś takiego:

function printMousePos(e) { 
    var cursorX = e.pageX; 
    var cursorY = e.pageY; 
    document.getElementById('test').innerHTML = "x: " + cursorX + ", y: " + cursorY; 
}

Edit: Nie zauważyłem nie mijały żadnego argumentu do printMousePos(), aktualizowany go printMousePos(e)

Źródło

2014-05-19 18:39:04 Kylok

proste rozwiązanie to:

gra .js:

document.addEventListener('click', printMousePos, true); 
function printMousePos(e){ 

     cursorX = e.pageX; 
     cursorY= e.pageY; 
     $("#test").text("pageX: " + cursorX +",pageY: " + cursorY); 
}

Źródło

2017-10-29 21:03:49 Tea

javascript pobiera współrzędne X i Y po kliknięciu myszy

Odpowiedz

Powiązane problemy