Javascript получает координаты x и y при щелчке мыши

У меня есть маленький тег div, который, когда я нажимаю на него (onClick event), запускает функцию printMousePos(). Это теги HTML:

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

Это функция printMousePos в отдельном файле .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;
}

Да, функция действительно работает (она знает, когда вы нажимаете ее и все), но возвращает undefined для x и y, поэтому я предполагаю, что код get x и y в функции неверен. Есть идеи? Я также знаю, что внутри javascript нет встроенных функций, чтобы возвращать x и y, как в java, ex.. был бы способ сделать это с помощью JQuery или php? (избегайте, если это возможно, хотя javascript будет лучше). Спасибо!

Ответы

Ответ 1

Как это.

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

document.addEventListener("click", printMousePos);

Ответ 2

Похоже, ваша функция printMousePos должна:

  1. Получить координаты X и Y мыши
  2. Добавьте эти значения в HTML

В настоящее время он делает это:

  1. Создает (неопределенные) переменные для координат X и Y мыши
  2. Прикрепляет функцию к событию "mousemove" (которое будет устанавливать эти переменные в координаты мыши при запуске движением мыши)
  3. Добавляет текущие значения ваших переменных в HTML

Видишь проблему? Ваши переменные никогда не устанавливаются, потому что как только вы добавляете свою функцию к событию "mousemove", вы печатаете их.

Кажется, что вам, вероятно, вообще не нужно это событие mousemove; Я бы попробовал что-то вроде этого:

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

Ответ 3

простое решение:

game.js:

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

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