wake-up-neo.net

javascript erhalten Sie X- und Y-Koordinaten per Mausklick

Ich habe ein kleines div-Tag, das beim Anklicken (onClick-Ereignis) die printMousePos()-Funktion ausführt. Dies sind die HTML-Tags:

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

Dies ist die printMousePos-Funktion in einer separaten .js-Datei:

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

Ja, die Funktion funktioniert tatsächlich (sie weiß, wann Sie darauf klicken und alle), aber sie gibt für x und y undefined zurück. Ich gehe also davon aus, dass der get-x- und y-Code in der Funktion falsch ist. Irgendwelche Ideen? Ich weiß auch, dass es keine eingebauten Funktionen in Javascript selbst gibt, um das x und y wie in Java zurückzugeben, z. B. würde es eine Möglichkeit geben, dies mit JQuery oder PHP zu tun? (Vermeiden Sie diese wenn möglich, Javascript wäre jedoch am besten). Vielen Dank!

29
Bryce Hahn

So war.

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

document.addEventListener("click", printMousePos);

MouseEvent - MDN

MouseEvent.clientXRead only
Die X-Koordinate des Mauszeigers in lokalen Koordinaten (DOM-Inhalt).

MouseEvent.clientYRead only
Die Y-Koordinate des Mauszeigers in lokalen Koordinaten (DOM-Inhalt).

68
Jonathan

Es klingt wie Ihre printMousePos Funktion sollte:

  1. Holen Sie sich die X- und Y-Koordinaten der Maus
  2. Fügen Sie diese Werte dem HTML hinzu

Derzeit tut es das:

  1. Erzeugt (undefinierte) Variablen für die X- und Y-Koordinaten der Maus
  2. Fügt dem "mousemove" -Ereignis eine Funktion hinzu (die diese Variablen bei Auslösung durch eine Mausbewegung auf die Mauskoordinaten setzt)
  3. Fügt die aktuellen Werte Ihrer Variablen zum HTML hinzu

Das Problem sehen? Ihre Variablen werden nie festgelegt, da Sie sie ausdrucken, sobald Sie Ihre Funktion zum "Mousemove" -Ereignis hinzufügen.

Es scheint, dass Sie dieses Mousemove-Event wahrscheinlich überhaupt nicht benötigen. Ich würde so etwas versuchen:

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

einfache Lösung ist dies:

game.js:

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

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