How can I get the cursor coordinates properly ? JavaScript

Question

How can I get the coordinates of the cursor on the screen properly ?

I tried using event.clientX and event.clientY however it only works in certain cases . If I try to make a special function for it it works

 stage = new createjs.Stage("myCanvas");
 circle = new createjs.Shape();
 circle.graphics.beginFill("red").drawCircle(0, 0, 40);
 createjs.Ticker.addEventListener("tick", handleTick);

 function handleTick() {
     if (circle.x > stage.canvas.width) { circle.x = 0; }
     stage.addChild(circle);
     stage.update();
 }

 document.addEventListener("mousemove", function(){circle.x = event.clientX,circle.y = event.clientY});

However when I try to include it in my function handleTick() I get a thon of erros :

Uncaught TypeError: Cannot read property 'clientX' of undefined

Are there any other things I can use for this ? And why don't it work in my the handleTick() function ?

You say _"when i try include it in my handler"_, which handler? — Asons, Jun 30 '18 at 14:10
Sorry Im new to js . I meant the function called handleTick() — Ionut Eugen, Jun 30 '18 at 14:10
How do you setup the handler? The event object is passed as an argument, but your handler doesn't have one defined, ie `function handleTick(event)` — Patrick Evans, Jun 30 '18 at 14:11
It's saying event is undefined. Try add it to your function. `function(event){circle.x...` — TPHughes, Jun 30 '18 at 14:12
Ah, so use `event.clientX` in your function and add `event` as a function parameter, e.g. `function handleTick(event) {...}` — Asons, Jun 30 '18 at 14:12

Asons · Accepted Answer · 2018-06-30T14:41:20.980

addEventListener should provide the event for you, if you do like this, and add event as a function argument. With that you should be able to get the mouse position and assign its values to your circle object.

function handleTick(event) {
     circle.x = event.clientX;
     if (circle.x > stage.canvas.width) { circle.x = 0; }
     stage.addChild(circle);
     stage.update();
}

If it won't, then you need to capture the mouse move and store its values in a global variable, and here is a great post showing additional ways how to do that.

Javascript - Track mouse position

How can I get the cursor coordinates properly ? JavaScript

1 Answers1