Menu
I facing a problem while getting offsetX on mousedown. Here is 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>
I am getting correct result which i want when my mousedown is upon the div area but it gives me wrong result when my mouse is over the paragraph area. I could not understand why this is happens because event is of parent element which is DIV element.
Obtain Result Case 1: when my mouse is over DIV Element top: 17px, left: 61px
Case 1: when my mouse is over DIV Element top: 11px, left: 9px
320
The MouseEvent.offsetX or MouseEvent.offsetY will give you the coordinates of the mouse pointer relative to the target nodes padding edge.
MouseEvent.offsetX
The MouseEvent.offsetX read-only property provides the offset in the X coordinate of the mouse pointer between that event and the padding edge of the target node.
So in the case of the <p> element inside the #myP element you are getting different values for offsetX and offsetY as expected.
What you could do to always get the mouse coordinates relative to the #myP element is to subtract the left and top values given by getBoundingClientRect method from the MouseEvent.clientX and MouseEvent.clientY properties.
Here is an example.
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>
andsets 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
