无法通过javascript获取鼠标坐标

Question

Recently I have been trying to get a grasp of javascript. I've been experimenting through the past couple of months with different code to see what all is possible through javascript. Recently I've been trying to find various ways to capture the mouse coordinates through javascript with a canvas. Here's my attempt: http://jsfiddle.net/f8n2one4/

As you can see, there's a MouseHandler which is supposed to capture the mouse coordinates through the ClientX and ClientY variables. However, when I try to display these variables, nothing comes up. Why is that?

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

Shouldn't it show the x and y values?

Answer 1

The x and y variable are out of the scope of your draw() method.

try the following:

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

See it working here.

I would recommend not to initialize the whole MouseHandler every interval, just getting the position on every interval.

Also if you are animating use .requestanimationframe() instead of setInterval, you'll get better performance.

Answer 2

In your example are you are initializing the mouse handler (with MouseHandler.init(element) ) but the x and y values have to be accessed using the getPos() method:

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

You can see a working update to your fiddle here

Answer 3

The x and y do not exist. You need to use:

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

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

Answer 4

It's actually really simple, your x, y are out of scope.

You could access them via your MouseHandler variable :

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

Or try OOP Javascript and instantiating the MouseHandler with a 'new' operator

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

var myMouseHandler = new MouseHandler();

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