Detect mouse position relevant to parent, rather than page

Question

I've got the below script which detects the position of the mouse relevant to the page, and accounts for a movement threshold of 100px, before registering the movement, allowing me to take actions.

// Keep track of last cursor positions
var cursorDistance = 0;
var lastCursorX = null;
var lastCursorY = null;

// On mousemove, take actions
section.on('mousemove', function(e){

    // Update last cursor positions to current positions
    var cursorX = e.clientX;
    var cursorY = e.clientY;
    var cursorThreshold = 100; // Amount of pixels cursor must move to register movement

    // Use Pythagorean theorem to calculate cursorDistance travelled (in any direction)
    if( lastCursorX ) cursorDistance += Math.sqrt(Math.pow(lastCursorY - cursorY, 2) + Math.pow(lastCursorX - cursorX, 2));

    // Each time cursorDistance travelled is equal or more than cursorThreshold
    if( cursorDistance >= cursorThreshold ){
        //// Do something here within page

        // Reset cursor distance to restart tracking
        cursorDistance = 0;
    }

    // Update last cursor positions to current positions to restart tracking
    lastCursorX = e.clientX;
    lastCursorY = e.clientY;
}

However, I need to adjust this to track the mouse position relevant to the parent element (rather than the page), which does work to some extent but the threshold of 100px is now ignored) and actions are taken with every pixel moved.

What am I doing wrong?

Note: The only difference in the 2 is vars cursorX and cursor Y, so I think my calculations here must be incorrect?

// Keep track of last cursor positions
var cursorDistance = 0;
var lastCursorX = null;
var lastCursorY = null;

// On mousemove, take actions
section.on('mousemove', function(e){

    // Update last cursor positions to current positions
    var cursorX = e.pageX - $(this).offset().left;
    var cursorY = e.pageY - $(this).offset().top;
    var cursorThreshold = 100; // Amount of pixels cursor must move to register movement

    // Use Pythagorean theorem to calculate cursorDistance travelled (in any direction)
    if( lastCursorX ) cursorDistance += Math.sqrt(Math.pow(lastCursorY - cursorY, 2) + Math.pow(lastCursorX - cursorX, 2));

    // Each time cursorDistance travelled is equal or more than cursorThreshold
    if( cursorDistance >= cursorThreshold ){
        //// Do something here within parent

        // Reset cursor distance to restart tracking
        cursorDistance = 0;
    }

    // Update last cursor positions to current positions to restart tracking
    lastCursorX = e.clientX;
    lastCursorY = e.clientY;
}

Answer 1

This solution will track the mouse only when it moves over an element.

section.on('mousemove', function (e) {
var cursorX = e.pageX - $(this).offset().left;
var cursorY = e.pageY - $(this).offset().top;
var cursorThreshold = 100; // Amount of pixels cursor must move to register movement 

if (lastCursorX) cursorDistance += Math.sqrt(Math.pow(lastCursorY - cursorY, 2) + Math.pow(lastCursorX - cursorX, 2));
if (cursorDistance >= cursorThreshold) {
  cursorDistance = 0;
}
lastCursorX = cursorX;
lastCursorY = cursorY;

})

If you need to track more elements You'd probably want to reset lastCursorX and lastCursorY at some point