How to Get the Mouse Position Relative to an Element in JavaScript?

Obtaining Mouse Position Relative to an Element

Getting the mouse's position relative to a specific element is crucial for interactive applications like canvas-based painting apps. To achieve this, we can utilize the getBoundingClientRect() method.

Consider the following JavaScript code snippet:

<code class="javascript">document.getElementById('clickme').onclick = function(e) {
  var rect = e.target.getBoundingClientRect();
  var x = e.clientX - rect.left; //x position within the element.
  var y = e.clientY - rect.top;  //y position within the element.
  console.log("Left? : " + x + " ; Top? : " + y + ".");
};</code>

In this example, we attach an onclick event to an element with the ID "clickme." When clicked, the event handler retrieves the bounding rectangle of the clicked element using getBoundingClientRect(). This rectangle represents the element's position and dimensions on the screen.

To calculate the mouse's position relative to the element, we subtract the bounding rectangle's left and top coordinates from the clientX and clientY properties of the click event. This gives us x and y, which represent the mouse's position within the clicked element.

The above is the detailed content of How to Get the Mouse Position Relative to an Element in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!