How To Work Out Distance Between Mouse And Element

In the tutorial today you will learn how you can use jQuery to get the distance of the mouse from a certain element on the page. This bit of code can be useful on a small web app which has a lot of user interaction and you want an event to run when the user mouse is in a certain distance from an element. There is a demo page for this code, which has a label to show the distance in pixels and an element which we will take the center position for.

The jQuery Code

To start with we are going to create the global variables and the document ready event for this event.

(function() {
 
    var mX, mY, distance,
        $distance = $('#distance span'),
        $element  = $('#element');
 
    $(document).mousemove(function(e) {
        distance = calculateDistance($element, e.pageX, e.pageY);
        $distance.text(distance);
    });
 
})();

As you can see from the code we set a function on the mouse move event so whenever the visitor moves the mouse this is ran. What we do then is use the e variable to get the X and Y position of the mouse and sent this to the function calculateDistance, with a parameter of element.

Calculate Distance

Below is the function we use which will work out the distance between the mouse position and the current element position.

function calculateDistance(elem, mouseX, mouseY) {
        return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
    }

View the demo to see this in action.