Menu
Is it possible to get the exact mouse position in a mouseouver event of an image? If I use a function that updates the mouse position on a document mouse move event, I can have problems with delay and this kind of thing and wouldn't get the EXACT position.
399
To get the mouse position relative to an element in React, set an onMouseMove event handler on the element, then calculate the local X and Y position using properties of the MouseEvent object passed to the event handler. Now the resulting X and Y coordinates will be relative to the element.
In Mouse Properties, on the Pointer Options tab, at the bottom, select Show location of pointer when I press the CTRL key, and then select OK. To see it in action, press CTRL.
The mouseover event triggers when the mouse pointer enters the div element, and its child elements. The mouseenter event is only triggered when the mouse pointer enters the div element. The onmousemove event triggers every time the mouse pointer is moved over the div element.
The onmouseover event occurs when the mouse pointer is moved onto an element, or onto one of its children. Tip: This event is often used together with the onmouseout event, which occurs when a user moves the mouse pointer out of an element.
If you are looking for a simple JS to get the cursor position for a MouseOver event, here is the sample code:
<!DOCTYPE html>
<html>
<head>
<script>
function getPos(e){
x=e.clientX;
y=e.clientY;
cursor="Your Mouse Position Is : " + x + " and " + y ;
document.getElementById("displayArea").innerHTML=cursor
}
function stopTracking(){
document.getElementById("displayArea").innerHTML="";
}
</script>
</head>
<body>
<div id="focusArea" onmousemove="getPos(event)" onmouseout="stopTracking()"><p>Mouse Over This Text And Get The Cursor Position!</p></div>
<p id="displayArea"></p>
</body>
</html>The javascript method offset() used for tracking the position, and here I did the same as Mayur says, just little bit added.
See jsfiddle
1
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
