Incorrect offsetX and offsetY values being returned on parent element's mousedown event

Question

Incorrect offsetX and offsetY values being returned on parent element's mousedown event

I'm encountering an issue with obtaining offsetX when mousedown occurs. Take a look at my code below

<!DOCTYPE html>
<html>
    <body>
        <div id="myP" onmousedown="mouseDown()">
            Click the text! The mouseDown() function is triggered when the mouse button is pressed down over this paragraph,
            <p style="margin-left:50px">
             and sets the color of the text to red. The mouseUp() function is triggered when the mouse button is released, 
            </p>
            and sets the color of the text to green.
        </div>
        <script>
            function mouseDown() {
                var left = event.offsetX;
                var top = event.offsetY;
                console.log(top+"::"+left);
            }
        </script>
    </body>
</html>

When my mousedown is over the div area, I get the correct result that I desire. However, when my mouse is over the paragraph area, I receive incorrect results. I am confused because the event should be from the parent element which is the DIV element.

Received Result Case 1: when my mouse is over DIV Element top: 17px, left: 61px

Case 2: when my mouse is over DIV Element top: 11px, left: 9px

javascript html css

Answer 1

Answer №1

Retrieve the mouse pointer coordinates using MouseEvent.offsetX or MouseEvent.offsetY, which provide the position relative to the target node's padding edge.

MouseEvent.offsetX

The read-only property, MouseEvent.offsetX, displays the X coordinate offset between the event and the padding edge of the target node.

When dealing with an element inside another element, like a <p> within #myP, expected variations in offsetX and offsetY can occur.

To consistently obtain mouse coordinates relative to #myP, deduct the values of left and top from MouseEvent.clientX and MouseEvent.clientY, respectively, retrieved by the getBoundingClientRect method.

Here is a sample code snippet for reference:

var myP = document.getElementById('myP'),
    output = document.getElementById('output');

function mouseDown(e) {
  var rect = e.currentTarget.getBoundingClientRect(),
      offsetX = e.clientX - rect.left,
      offsetY = e.clientY - rect.top;
  output.textContent = "Mouse-X: " + offsetX + ", Mouse-Y: " +  offsetY;
  console.log("Mouse-X: " + offsetX, "Mouse-Y: " + offsetY);
}

myP.addEventListener('mousedown', mouseDown, false);

body {
  margin: 0;
  font-family: sans-serif;
}

#myP {
  background: lawngreen;
  margin-left: 50px;
}

#myP > p {
  background: yellow;
  margin-left: 50px;
}

#myP > div > p {
  background: red;
  color: white;
  margin-left: 100px;
}

<div id="myP">
  Click the text! The mouseDown() function is triggered when the mouse button is pressed down over this paragraph,
  <p>
    and sets the color of the text to red. The mouseUp() function is triggered when the mouse button is released,
  </p>
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quaerat dolor modi et quidem repudiandae vero, recusandae laborum quae veritatis, doloribus similique accusamus quibusdam voluptate, dolore fugiat eum. Corporis, porro.
    </p>
  </div>
  and sets the color of the text to green.
</div>
<p id="output"></p>

Answer 2

Retrieve the mouse pointer coordinates using MouseEvent.offsetX or MouseEvent.offsetY, which provide the position relative to the target node's padding edge.

MouseEvent.offsetX

The read-only property, MouseEvent.offsetX, displays the X coordinate offset between the event and the padding edge of the target node.

When dealing with an element inside another element, like a <p> within #myP, expected variations in offsetX and offsetY can occur.

To consistently obtain mouse coordinates relative to #myP, deduct the values of left and top from MouseEvent.clientX and MouseEvent.clientY, respectively, retrieved by the getBoundingClientRect method.

Here is a sample code snippet for reference:

var myP = document.getElementById('myP'),
    output = document.getElementById('output');

function mouseDown(e) {
  var rect = e.currentTarget.getBoundingClientRect(),
      offsetX = e.clientX - rect.left,
      offsetY = e.clientY - rect.top;
  output.textContent = "Mouse-X: " + offsetX + ", Mouse-Y: " +  offsetY;
  console.log("Mouse-X: " + offsetX, "Mouse-Y: " + offsetY);
}

myP.addEventListener('mousedown', mouseDown, false);

body {
  margin: 0;
  font-family: sans-serif;
}

#myP {
  background: lawngreen;
  margin-left: 50px;
}

#myP > p {
  background: yellow;
  margin-left: 50px;
}

#myP > div > p {
  background: red;
  color: white;
  margin-left: 100px;
}

<div id="myP">
  Click the text! The mouseDown() function is triggered when the mouse button is pressed down over this paragraph,
  <p>
    and sets the color of the text to red. The mouseUp() function is triggered when the mouse button is released,
  </p>
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quaerat dolor modi et quidem repudiandae vero, recusandae laborum quae veritatis, doloribus similique accusamus quibusdam voluptate, dolore fugiat eum. Corporis, porro.
    </p>
  </div>
  and sets the color of the text to green.
</div>
<p id="output"></p>

Answer 3

Answer №2

To quickly address the issue, consider adding pointer-events: none; to the main children element

Answer 4

To quickly address the issue, consider adding pointer-events: none; to the main children element

Incorrect offsetX and offsetY values being returned on parent element's mousedown event

Answer №1

Answer №2

Similar questions

Transforming a JavaScript object into a different shape

Problem encountered with the submission feature in Zend Framework

What is the best way to transfer a user query to a Next.js API?

Changing the color of options in a list when clicked: a step-by-step guide

My goal is to generate a collection of fullwidth ion-cards using data from an array of objects

What is the best method for showcasing a JSON dataset retrieved from an HTTP GET request on an empty HTML document?

Display or conceal a button in Angular 6 based on certain conditions

Retrieving dynamically generated form components upon submission in a React application

Increasing the size of elements with jQuery animate method

Concentrate on utilizing the jquery tokeninput feature specifically for Chrome and Opera browsers

What could have caused this issue to appear when I tried running ng build --prod?

Injector in Angular 6 Universal requires an additional app variable to be injected into the service

Generate a JSON file using Node.js

styles.css is generating an ERROR message, indicating that it is unable to read properties of null when trying to access the 'classList'

Can the color of a highchart graph be altered simply by clicking on the line?

Encountering the error message "React child is not valid as a Gatsby wrapRootElement" while using TypeScript with Gatsby

EJS is failing to render

Validating forms using Ajax in the Model-View-Controller

Unable to append XML nodes using jQuery's parseXML function, but able to append font

Is it possible to dynamically register models in Vue?