{"id":324,"date":"2013-10-07T22:15:56","date_gmt":"2013-10-07T14:15:56","guid":{"rendered":"https:\/\/www.techcoil.com\/blog\/?p=324"},"modified":"2018-09-04T13:07:00","modified_gmt":"2018-09-04T05:07:00","slug":"how-to-use-jquery-to-get-mouse-cursor-coordinates-when-mouse-moves","status":"publish","type":"post","link":"https:\/\/www.techcoil.com\/blog\/how-to-use-jquery-to-get-mouse-cursor-coordinates-when-mouse-moves\/","title":{"rendered":"How to use jQuery to get mouse cursor coordinates when mouse moves"},"content":{"rendered":"

I was exploring on how to create drag and drop elements on a webpage. The first thing that I have to know is to detect my mouse cursor coordinates when my mouse moves. <\/p>\n

This post documents my exploration in using jQuery to detect mouse cursor coordinates when I move my mouse.<\/p>\n

Registering a JavaScript callback function to listen to mouse movements<\/h2>\n

Getting notified when the mouse moves is easy with jQuery:<\/p>\n

\r\n$(document).mousemove(function(event) {\r\n    $('#mousePosition').html('Your mouse is currently at: ' \r\n                                + event.pageX +', '+ event.pageY);\r\n});\r\n<\/pre>\n
I first wrap the document object with the jQuery function. I then call the mousemove<\/code> function, passing in a callback function that accepts an event<\/code> object. By doing so I instructed jQuery that I want it to help me listen for mouse movements that happens on the entire webpage.<\/p>\n
In the callback function, I use jQuery to look for a element marked with mousePosition<\/code> as its id and set the coordinates of the mouse as its html contents. The pageX<\/code> and pageY<\/code> attributes of the event<\/code> object give me the coordinates of my mouse cursor. <\/p>\n
The entire HTML document<\/h2>\n
After constructing the JavaScript codes, I proceed to construct the HTML document by referencing my little HTML code reference<\/a>. I then include the JavaScript codes at the head section of the document. The following is the entire HTML document that I use for realizing this proof of concept.<\/p>\n
\r\n<html>\r\n<head>\r\n    <script type="text\/javascript" src="\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.1\/jquery.min.js"><\/script>\r\n    <script type="text\/javascript">\r\n        $(document).ready(function(){\t   \r\n            $(document).mousemove(function(event){\r\n\t        $('#mousePosition').html('Your mouse is currently at: ' \r\n                                            + event.pageX +', '+ event.pageY);\r\n            }); \r\n\t});\r\n    <script>\r\n<\/head>\r\n<body>\r\n<div id="mousePosition">\r\nNo mouse movement detected yet.\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
\n   See this proof of concept<\/a>\n<\/div>\n\n