Javascript get mouse coordinates6/11/2023 ![]() ![]() If you scroll the page and then check the values, there will be a difference in the values. We have not scrolled the page yet, so we are getting the same values. Seeing the output in the console, you will not see any difference as the pageX, and clientX are showing the same values, and the pageY and clientY are showing the same values. The below screenshot illustrates the output of the above code. Inside the mousemove() function, we just have console.log() the mouse values using event.pageX, event.pageY, and event.clientX, event.clientY. You can give whatever name to the mousemove() function, but you have to pass the exact event name to the event listener otherwise, it will not work. This event variable will provide the mouse’s updated x and y positions. This function takes event as an argument. In this case, we have created the function mousemove() and have passed it as a callback to the event listener. The second parameter is a function that will be executed after the event is triggered. This function takes two parameters, the first parameter is the event that we want to add. We have added a mousemove event to the window object using the addEventListener function in the script file. Window.addEventListener( 'mousemove', mousemove) Let’s understand both these ways with the below example. Tracking Mouse Position Using PageX, PageY, and clientX, clientY in JavaScript If you want to track mouse position based on the screen’s visible area, use clientX and clientY.If you want to track mouse positions relative to the size of the webpage, use pageX and pageY.There are two different ways of getting these x and y positions of the mouse within the browser’s tab, and these ways are as follows. If you move the mouse horizontally, its x position will change, and if you move the mouse vertically, its y position will change. You might be aware that the top-left corner of the browser is represented with (0,0). To track the mouse position, we have to find its x-axis (horizontal position) and y-axis (vertical position) inside the browser’s tab. Various Ways of Tracking Mouse Events in JavaScript To see a full list of mouse events, you can visit the Mouse Events MDN docs. There are various mouse events available in JavaScript, out of which we will be focusing on the mousemove event as we want to track mouse position. For example, a mousedown event is only triggered when a user clicks on the mouse button. An event listener is something that keeps on listening for the changes which are happening. To track mouse movement in JavaScript, we make use of an event listener. Tracking Mouse Position Using PageX, PageY, and clientX, clientY in JavaScript.Various Ways of Tracking Mouse Events in JavaScript.Then event.currentTarget will do the trick. If you use event.target and hover your mouse over div2, you will get relative coordinates regarding div2 while you might want them to be regarding div0. It makes the difference when you want to attach a listener to some element that has multiple children. event.currentTarget is the element that the event listener is attached to.event.target is the element that triggered the event (e.g., the user clicked on or hovered on).Now x and y are the relative coordinates. I recommend using currentTarget instead of target: const handleEvent = (event) =>Ĭonst bounds = () So far I have this function onMousemove(event) Īlthough the answer of Nikita Volkov is pretty solid, it might not work as expected in some cases. I am trying to get the mouse position relative to the div with the id container. I currently have a div structured with other elements inside of it. ![]()
0 Comments
Leave a Reply. |