检测与父级相关的鼠标位置，而不是页面

Question

我有下面的脚本，它检测鼠标与页面相关的位置，并考虑到 100px 的移动阈值，在注册移动之前，允许我采取行动。

// 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;
}

但是，我需要调整它以跟踪与父元素（而不是页面）相关的鼠标位置，这在某种程度上确实有效，但现在忽略了 100px 的阈值）并且每次都采取行动像素移动。

我做错了什么？

注意：2中唯一的区别是vars cursorX和cursor Y，所以我想我这里的计算一定是不正确的？

// 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

此解决方案将仅在鼠标移过元素时跟踪鼠标。

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;

})

如果您需要跟踪更多元素您可能希望在某个时候重置 lastCursorX 和 lastCursorY

检测与父级相关的鼠标位置，而不是页面

Detect mouse position relevant to parent, rather than page

javascript

jquery

offset