Advanced Search

Return to Snippet

Revision: 69267
at May 20, 2015 03:22 by COBOLdinosaur
Initial Code 
The HTML:
<form name="theform">
x = <input name="xcoord"> 
y = <input name="ycoord">
</form>
<br /><br />
<section>
<h3> or as plain text</h3>
<span id="spanx"> </span>
<span id="spany"> </span>
</section>
The Javascript:
function showit(e)
{
   document.forms.theform.xcoord.value=e.pageX;
   document.getElementById('spanx').innerHTML='x='+e.pageX;
   document.getElementById('spany').innerHTML='y='+e.pageY;
   document.forms.theform.ycoord.value=e.pageY;
}
if (document.addEventListener)
{
    document.addEventListener("mousemove", function(e){showit(e)}, false) //invoke function
}
Initial URL 
http://coboldinosaur.com/pages/Capture_Mouse_Position.html
Initial Description 
The key to making it work is the event listener that get added using the DOM method that binds it to the mousemove event and declares the event handler. Most event can be bound to a handler this way.
Initial Title 
Caoturing the Mouse Position
Initial Tags 
javascript, html
Initial Language 
JavaScript