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

【问题标题】：Detect mouse position relevant to parent, rather than page检测与父级相关的鼠标位置，而不是页面
【发布时间】：2021-09-23 14:15:29
【问题描述】：

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

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

【问题讨论】：

那是什么部分？你能发布你的html吗？
嗨@michal.materowski，该部分是整个页面中我希望效果发生的区域，而不是相对于整个页面，我只想检测与此相关的鼠标事件。
好吧，我想我明白了。仍然很难推断错误在哪里，因为我不知道你为 lastCursorX 和 lastCursor Y 变量分配了什么
刚刚更新了显示这些在 mousemove 事件期间如何更新的问题，希望对您有所帮助？
谢谢！我已经在 plunker 中检查了它，并且仅记录了 #section 元素的操作。当我将鼠标移到其他元素上时，没有计算。阈值似乎也可以正常工作。我错过了什么，你能看一下吗？ playcode.io/789267

标签： javascript jquery offset

【解决方案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

【讨论】：

太好了，谢谢@michal.materowski！诀窍似乎是最下面的两行，否则 cusrsorThreshold 变量将被忽略（并且每 1px 发生一次操作）。非常感谢您的帮助。