When you logged the result, you’d see odd instances where the offset value would fall back down to something like 10 or 15 regardless of where the mouse’ position actually was. With no height, the mouse event had little to work with to maintain consistent tracking of offsetY and offsetX.
#Finding mouse coordinates react update#
With no children in flow, it has no need to update it’s height to fit it’s contents, resulting in what is essentially a height of 0px. In this case, the div is the only child of body. But if the user scrolls the image, or if the image zoom value is not 100, then the mouse click position (x. This is because absolute positioned elements are removed from the parent’s flow. Now, we get the coordinates relative to the control. Unless the OP sets the height of the body tag (they did not), the body won’t have any height. getBoundingClientRect () to find the coordinates according to which axis and then get the mouse coordinate using the methods from MouseEvent which would be. What you could probably do is find the component element position on the screen using. For Windows 7 and 8: select 'View by: Large icons' at the top right of the Control Panel window. Yes and on click check against coordinates. works in reference to the parent container, this case the body element. The 'cursor location' feature works with Windows XP, 7, and 8 here are the steps to enable it: 1. They should have been using event.pageY and event.pageX instead. This means that vertical zero is topmost point and horizontal zero is the leftmost point. So what went wrong? In short, the problem was that the OP was using the wrong event attribute when trying to set the top and left CSS values. The top left corner of the screen is (0, 0) i,e, X and Y coordinate is (0, 0). In real time the circle would follow more closely to the cursor but would ultimately jump back to the top left corner.
0 kommentar(er)
