How to capture the coordinates of your mouse as it moves along a path with jQuery

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.

Previously, I had discussed:

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.

Using jQuery detect to mouse clicks on the HTML document

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 function.

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:

captureMouseCoordinates = false;
$(document).mousedown(function(e) {
    captureMouseCoordinates = !captureMouseCoordinates;
});

Note that as long as you press any of the buttons on your mouse, the toggling of captureMouseCoordinates will happen.

Using jQuery to listen to mouse movements on the HTML document

Next, we add the code snippet that will record the mouse coordinates when the mouse moves when captureMouseCoordinates is true:

mouseCoordinates = [];
$(document).mousemove(function(event) {
  if (captureMouseCoordinates) {
    mouseCoordinates.push([event.pageX, event.pageY]);
  }
});

First, we initialize a list, mouseCoordinates, to hold the mouse coordinates. After that, we supply a callback function to $.mousemove that will save the x and y coordinates of the mouse cursor to the mouseCoordinates when captureMouseCoordinates is true.

Using jQuery to listen to space bar presses

In order to reconstruct mouseCoordinates for moving the object, we need to use a third event trigger. Since I have a keyboard connected to my computer, I will use the space bar as the trigger to get the codes for reconstructing mouseCoordinates:

$(document).keydown(function(event){
  if (event.keyCode == 32) {
    console.log(JSON.stringify(mouseCoordinates));
    mouseCoordinates = [];
  }
});

In the above code, we supply a callback function to $.keydown that will write the contents of mouseCoordinates as JSON to console when the space bar is pressed. After doing so, it will reset mouseCoordinates to an empty list.

Putting all together

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:

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
      captureMouseCoordinates = false;
      mouseCoordinates = [];
      $(document).mousedown(function(e) {
        captureMouseCoordinates = !captureMouseCoordinates;
      }).mousemove(function(event) {
        if (captureMouseCoordinates) {
          mouseCoordinates.push([event.pageX, event.pageY]);
        }
      }).keydown(function(event){
        if (event.keyCode == 32) {
          console.log(JSON.stringify(mouseCoordinates));
          mouseCoordinates = [];
        }
      });
    </script>
</head>
<body>
</body>
</html>

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.

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.

About Clivant

Clivant a.k.a Chai Heng enjoys composing software and building systems to serve people. He owns techcoil.com and hopes that whatever he had written and built so far had benefited people. All views expressed belongs to him and are not representative of the company that he works/worked for.