Posted By

COBOLdinosaur on 05/20/15


Tagged

javascript html events


Versions (?)

Caoturing the Mouse Position


 / Published in: JavaScript
 

URL: http://coboldinosaur.com/pages/Capture_Mouse_Position.html

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.

  1. The HTML:
  2. <form name="theform">
  3. x = <input name="xcoord">
  4. y = <input name="ycoord">
  5. </form>
  6. <br /><br />
  7. <section>
  8. <h3> or as plain text</h3>
  9. <span id="spanx"> </span>
  10. <span id="spany"> </span>
  11. </section>
  12. The Javascript:
  13. function showit(e)
  14. {
  15. document.forms.theform.xcoord.value=e.pageX;
  16. document.getElementById('spanx').innerHTML='x='+e.pageX;
  17. document.getElementById('spany').innerHTML='y='+e.pageY;
  18. document.forms.theform.ycoord.value=e.pageY;
  19. }
  20. if (document.addEventListener)
  21. {
  22. document.addEventListener("mousemove", function(e){showit(e)}, false) //invoke function
  23. }

Report this snippet  

You need to login to post a comment.