Jump to content

Display Mouse Position


jamesadrian
 Share

Recommended Posts

I have a page that works here:

https://www.futurebeacon.com/00Music/scoremakerdemo.htm

I am looking for a way to continuously display in the menu at the top of the page the mouse position at all times except possible when a mouse button is being pressed.  Google and Bing seem to give me only similar subjects - like the position when hovering over a specific thing.  Any leads would be greatly appreciated.

Thank you for your help.

Jim Adrian

jim@futurebeacon.com

 

 

 

Link to comment
Share on other sites

You would need a mousemove event on the <body> element. Using that event, you would have to find the coordinates of the mouse relative to the page using the pageX and pageY event properties. Here's a quick example:

document.body.addEventListener("mousemove", checkMousePosition, false);
function checkMousePosition(e) {
  console.log(e.pageX, e.pageY);
}

If an element is a direct child of the body, you can set its position to absolute using CSS and its top and left properties will be relative to the page. Then you can use the mouse event to set the element's top and left properties:

// You should store a reference to the element that will follow the mouse into the "element" variable
element.style.top = e.pageX + "px";
element.style.left = e.pageY + "px";

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...