Не удается получить координаты мыши через javascript

Question

Недавно я пытался понять javascript. В течение последних нескольких месяцев я экспериментировал с другим кодом, чтобы узнать, что все возможно с помощью javascript. Недавно я пытался найти различные способы захвата координат мыши через javascript с помощью холста. Вот моя попытка: http://jsfiddle.net/f8n2one4/

Как вы можете видеть, есть MouseHandler, который должен фиксировать координаты мыши с помощью переменных ClientX и ClientY. Однако, когда я пытаюсь отобразить эти переменные, ничего не возникает. Почему это?

document.getElementById("test").innerHTML = "x: " + x + " y: " + y; 

Не следует ли показывать значения x и y?

Answer 1

В вашем примере вы инициализируете обработчик мышей (с MouseHandler.init(element)), но x и y значения должно быть доступно с помощью getPos() метода:

document.getElementById("test").innerHTML = 
    "x: " + MouseHandler.getPos().x + 
    " y: " + MouseHandler.getPos().y; 

Вы можете увидеть рабочие обновления на скрипку here

Answer 2

Переменные x и y выходят за рамки метода draw().

попробуйте следующее:

function draw() { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    player(); 
    MouseHandler.init(document); 
    var clientPosition = MouseHandler.getPos(); 
    document.getElementById("test").innerHTML = "x: " + clientPosition.x + " y: " + clientPosition.y; 
} 

Посмотри здесь работать.

Я бы рекомендовал не инициализировать весь MouseHandler каждый интервал, просто получая позицию на каждом интервале.

Также, если вы используете анимацию для использования .requestanimationframe() вместо setInterval, вы получите лучшую производительность.

Answer 3

x и y не существует. Вы должны использовать:

document.getElementById("test").innerHTML = "x: " + MouseHandler.getPos().x + " y: " + MouseHandler.getPos().y; 

Fiddle: http://jsfiddle.net/f8n2one4/3/

Answer 4

Это на самом деле очень просто, ваш х, у из области видимости.

Вы можете получить доступ к ним через переменную MouseHandler:

MouseHandler.getPos().x 
MouseHandler.getPos().y 

Или попробуйте объектно-ориентированное программирование Javascript и инстанцирование MouseHandler с «новым» оператором

var MouseHandler = function() { 
    this.x = 0; 
    this.y = 0; 
} 

var myMouseHandler = new MouseHandler(); 

console.log(myMouseHandler.x + myMouseHandler.y);