In web development, there are three main ways to get the mouse position in JavaScript: 1. Use clientX and clientY to obtain the browser's visual area coordinates, which are suitable for following the cursor or judging areas; 2. Use pageX and pageY to obtain the entire page coordinates including the scrolling part, which is suitable for scenes where absolute positions are required; 3. Use offsetX and offsetY to obtain the relative position of the mouse inside the element, which is often used for canvas or hot zone detection. In addition, after obtaining the mouse coordinates, it can be used to customize the interactive functions such as cursor, drag and drop sorting, drawing tools, hover judgment and game control. Selecting the appropriate coordinate system and debugging multiple values ??can avoid confusion.

In web development, getting mouse position is a common requirement, such as for customizing cursors, interactive effects or game controls. JavaScript provides a variety of ways to get the mouse position, mainly through attributes in event objects.

Get viewport coordinates using clientX and clientY

This is one of the most commonly used methods. When a mouse event (such as mousemove ) is triggered, clientX and clientY attributes will be included in the event object, indicating the coordinates of the mouse relative to the browser's visible area (excluding scroll bars).

 document.addEventListener('mousemove', function(event) {
  console.log('X:', event.clientX, 'Y:', event.clientY);
});

This method is suitable for you to know the position of the mouse in the current window, such as following the cursor or determining whether it is in a certain area.

Tips: If you want to get the position relative to the entire page (including the scrolling part), you can use pageX and pageY .

Use offsetX and offsetY to get the internal coordinates of the element

If you only care about the position of the mouse inside a specific element, you can use offsetX and offsetY . These two values ??represent the position of the mouse relative to the upper left corner of the element.

 element.addEventListener('mousemove', function(event) {
  console.log('Offset X:', event.offsetX, 'Offset Y:', event.offsetY);
});

This method is often used in canvas operation, image hot zone detection and other scenarios.

It should be noted that if the target element has padding or border, these values ??will also affect the calculation result of offsetX/Y .

What can I do after getting the coordinates?

• Implement custom cursor or floating prompts
• Do interactive functions such as drag and drop sorting, drawing tools, etc.
• Determine whether the user is hovering in a hot spot
• Control the direction of character movement in game development

You can choose which coordinate system to use according to the specific scenario:

• If you need coordinates relative to the browser window → use clientX/Y
• If you need to consider the absolute position after the page is scrolled → use pageX/Y
• If you want to determine the specific position of the mouse inside the element → use offsetX/Y

Basically all of this is it. It doesn't seem complicated, but it's easy to make mistakes due to confusing the coordinate system. So remember to print multiple values ??and compare them when debugging.

The above is the detailed content of How to get the mouse position in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!