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

У меня есть небольшой тег div, который, когда я нажимаю на него (событие onClick), запускает функцию 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, поэтому я предполагаю, что код получения x и y в функции неверен. Любые идеи? Я также знаю, что в самом javascript нет встроенных функций для возврата x и y, как в java, например ... есть ли способ сделать это, скажем, с помощью JQuery или php? (по возможности избегайте этого, лучше всего использовать javascript). Спасибо!


javascript html onclick onmouseclick
person Bryce Hahn    schedule 19.05.2014    source источник
comment
event.clientX и event.clientY   -  person Jonathan    schedule 19.05.2014
comment
@Jonathan Я пробовал это, но все равно возвращает undefined.   -  person Bryce Hahn    schedule 19.05.2014
comment
CursorX и cursorY не определены до срабатывания события перемещения мыши. Если вы хотите, чтобы позиция от события передачи события щелчка до функции printMousePos   -  person Mathias    schedule 19.05.2014
comment
Использование event.clientX и ** event.clientY обеспечивает координаты относительно элемента с учетом полей, отступов и границ. Чтобы получить правильные координаты, используйте event.offsetX и event.offsetY.   -  person jordiburgos    schedule 02.08.2019

Ответы (3)


arrow_upward
104
arrow_downward

Нравится.

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

document.addEventListener("click", printMousePos);

MouseEvent - MDN

MouseEvent.clientX Только для чтения
Координата X указателя мыши в локальных координатах (содержимое DOM).

MouseEvent.clientY Только для чтения
Координата Y указателя мыши в локальных координатах (содержимое DOM).

person Jonathan    schedule 19.05.2014
comment
Re: pageX / Y vs . clientX / Y - person Kylok; 19.05.2014
comment
Это правильный ответ и должен быть отмечен как таковой - person John Smith; 24.12.2017
comment
не работает, если щелчок был внутри iframe - person Alex from Jitbit; 15.03.2021

arrow_upward
14
arrow_downward

Похоже, ваша 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;
}
person Kylok    schedule 19.05.2014

arrow_upward
0
arrow_downward

простое решение таково:

game.js:

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

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