The Javascript code below provides a sample of how the user’s mouse cursor position, displayed as X- and Y-coordinates in relation to the top left corner of the page. In this example, I put the X- and Y-coordinate values in an input box, but you can tweak that to fit your needs.<\/p>\n
\r\n<html>\r\n\r\n<script type=\"text\/javascript\">\r\nwindow.onload = init;\r\nfunction init() {\r\n\tif (window.Event) {\r\n\tdocument.captureEvents(Event.MOUSEMOVE);\r\n\t}\r\n\tdocument.onmousemove = getCursorXY;\r\n}\r\n\r\nfunction getCursorXY(e) {\r\n\tdocument.getElementById('cursorX').value = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);\r\n\tdocument.getElementById('cursorY').value = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);\r\n}\r\n<\/script>\r\n\r\n<body>\r\n\r\n<input type=\"text\" id=\"cursorX\" size=\"3\"> X-position of the mouse cursor\r\n<br \/><br \/>\r\n<input type=\"text\" id=\"cursorY\" size=\"3\"> Y-position of the mouse cursor\r\n\r\n<\/body>\r\n<\/html>\r\n<\/xmp><\/pre>\n<p><script type=\"text\/javascript\">\nwindow.onload = init;\nfunction init() {\n\tif (window.Event) {\n\tdocument.captureEvents(Event.MOUSEMOVE);\n\t}\n\tdocument.onmousemove = getCursorXY;\n}\nfunction getCursorXY(e) {\n\tdocument.getElementById('cursorX').value = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);\n\tdocument.getElementById('cursorY').value = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);\n}\n<\/script><\/p>\n<p>Below is a demo of the code listed above:<\/p>\n<p class=\"code\">\n\t<input type=\"text\" id=\"cursorX\" size=\"3\"> X-position of the mouse cursor<\/p>\n<p>\t<input type=\"text\" id=\"cursorY\" size=\"3\"> Y-position of the mouse cursor<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sometimes I find it helpful to know where the user’s mouse cursor is when a certain action takes place. For example, when a user mouses over a particular field label, I may wish to show a small explanation that provides instructions on how to populate the related field, and the message will show near the mouse cursor. The following script shows you how to get the user’s mouse cursor position using only a few lines of code.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-79","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/posts\/79","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/comments?post=79"}],"version-history":[{"count":1,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/posts\/79\/revisions"}],"predecessor-version":[{"id":241,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/posts\/79\/revisions\/241"}],"wp:attachment":[{"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/media?parent=79"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/categories?post=79"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/tags?post=79"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}