Wrong offsetX and offsetY on mousedown event of parent element
Question
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
1 answers
solution1
14 2016-02-12 14:21:58
The MouseEvent.offsetX or MouseEvent.offsetY will give you the coordinates of the mouse pointer relative to the target nodes padding edge.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.