In this post, we extend those ideas to build a simple mechanism that captures the coordinates of your mouse as it moves alone a path.<\/p>\n
Using jQuery detect to mouse clicks on the HTML document<\/h2>\n
Let's use mouse clicks to toggle the capturing of coordinates of the mouse as it moves. In order to do so, we provide a JavaScript callback function to the $.mousedown<\/a> function. <\/p>\n Inside that callback function, we toggle a global variable between the values of true and false to start\/stop capture. Given these points, the following is the code snippet that prepares that global variable and registers a callback function that does the toggling when mouse clicks are detected:<\/p>\n Note that as long as you press any of the buttons on your mouse, the toggling of Next, we add the code snippet that will record the mouse coordinates when the mouse moves when First, we initialize a list, In order to reconstruct In the above code, we supply a callback function to $.keydown<\/a> that will write the contents of In case you need it, the following is a complete HTML document that you can use for capturing the coordinates of your mouse as it moves along a path with jQuery:<\/p>\n To capture the coordinates of your mouse as it moves along a path, you can first load the HTML document with your browser. After you had done so, you can click your mouse and move your cursor along a path of travel. <\/p>\n When you wish to get the codes to reconstruct the path of travel, you can then press the space bar. After that, you can get the codes from the console window of your browser.<\/p>\n\n When you want to move an object on your web page, you can do so by setting the top and left property of that object to several screen coordinates along a path of travel. Although you can create those coordinates by hand, it is more efficient to capture those coordinates using your mouse. <\/p>\n Previously, I had discussed:<\/p>\n In this post, we extend those ideas to build a simple mechanism that captures the coordinates of your mouse as it moves alone a path.<\/p>\n","protected":false},"author":1,"featured_media":1208,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"footnotes":""},"categories":[375],"tags":[575,576,574,16,128,89,171],"jetpack_featured_media_url":"https:\/\/www.techcoil.com\/blog\/wp-content\/uploads\/jquery-logo-mark-dark.gif","jetpack_shortlink":"https:\/\/wp.me\/p245TQ-4M","jetpack-related-posts":[],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/posts\/296"}],"collection":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/comments?post=296"}],"version-history":[{"count":0,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/posts\/296\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/media\/1208"}],"wp:attachment":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/media?parent=296"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/categories?post=296"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/tags?post=296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\r\ncaptureMouseCoordinates = false;\r\n$(document).mousedown(function(e) {\r\n captureMouseCoordinates = !captureMouseCoordinates;\r\n});\r\n<\/pre>\ncaptureMouseCoordinates<\/code> will happen.<\/p>\nUsing jQuery to listen to mouse movements on the HTML document<\/h2>\n
captureMouseCoordinates<\/code> is true:<\/p>\n\r\nmouseCoordinates = [];\r\n$(document).mousemove(function(event) {\r\n if (captureMouseCoordinates) {\r\n mouseCoordinates.push([event.pageX, event.pageY]);\r\n }\r\n});\r\n<\/pre>\nmouseCoordinates<\/code>, to hold the mouse coordinates. After that, we supply a callback function to $.mousemove<\/a> that will save the x and y coordinates of the mouse cursor to the mouseCoordinates<\/code> when captureMouseCoordinates<\/code> is true.<\/p>\nUsing jQuery to listen to space bar presses<\/h2>\n
mouseCoordinates<\/code> for moving the object, we need to use a third event trigger. Since I have a keyboard<\/a> connected to my computer, I will use the space bar as the trigger to get the codes for reconstructing mouseCoordinates<\/code>:<\/p>\n\r\n$(document).keydown(function(event){\r\n if (event.keyCode == 32) {\r\n console.log(JSON.stringify(mouseCoordinates));\r\n mouseCoordinates = [];\r\n }\r\n});\r\n<\/pre>\nmouseCoordinates<\/code> as JSON to console when the space bar is pressed. After doing so, it will reset mouseCoordinates<\/code> to an empty list.<\/p>\nPutting all together<\/h2>\n
\r\n<html>\r\n<head>\r\n <script type="text\/javascript" src="https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js"><\/script>\r\n <script type="text\/javascript">\r\n captureMouseCoordinates = false;\r\n mouseCoordinates = [];\r\n $(document).mousedown(function(e) {\r\n captureMouseCoordinates = !captureMouseCoordinates;\r\n }).mousemove(function(event) {\r\n if (captureMouseCoordinates) {\r\n mouseCoordinates.push([event.pageX, event.pageY]);\r\n }\r\n }).keydown(function(event){\r\n if (event.keyCode == 32) {\r\n console.log(JSON.stringify(mouseCoordinates));\r\n mouseCoordinates = [];\r\n }\r\n });\r\n <\/script>\r\n<\/head>\r\n<body>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n\n
![\"Facebook](\"\/ph\/img\/3rd-party\/social-icons\/Facebook.png\")
Share\n <\/a>\n <\/li>\n ![\"Twitter](\"\/ph\/img\/3rd-party\/social-icons\/Twitter.png\")
Tweet\n <\/a>\n <\/li>\n ![\"Linkedin](\"\/ph\/img\/3rd-party\/social-icons\/linkedin.png\")
Share\n <\/a>\n <\/li>\n ![\"Pinterest](\"\/ph\/img\/3rd-party\/social-icons\/Pinterest.png\")
Save\n <\/a>\n <\/li>\n <\/ul>\n ","protected":false},"excerpt":{"rendered":"\n