检测 X 像素的鼠标移动

Question

我试图在光标位置移动 X 个像素（例如 100px）时触发一个事件。因此，光标在 X 或 Y 方向上每移动 100 像素，我就会触发一个事件。每移动 100 像素，就应继续执行此操作。

我已经成功检测到光标的“当前”X 和 Y 位置，并设置了像素阈值，但正在努力解决其余的数学问题。有人可以帮忙吗？

$(window).on('mousemove', function(e){

    // Vars
    var cursorX = e.clientX;
    var cursorY = e.clientY;
    var cursorThreshold = 100;

    ... detect every 100px movement here...

});

Answer 1

您需要跟踪旧的光标位置。然后您可以使用毕达哥拉斯定理计算距离：

totalDistance += Math.sqrt(Math.pow(oldCursorY - cursorY, 2) + Math.pow(oldCursorX - cursorX, 2))

这在任何方向都有效。

例子：

_{注意：与@wayneOS的方法（我的+1）不同，我不跟踪方向。
这是一个相当简约的实现。}

var totalDistance = 0;
var oldCursorX, oldCursorY;

$(window).on("mousemove", function(e){
    var cursorThreshold = 100;
    
    if (oldCursorX) totalDistance += Math.sqrt(Math.pow(oldCursorY - e.clientY, 2) + Math.pow(oldCursorX - e.clientX, 2));
    if (totalDistance >= cursorThreshold){
        console.log("Mouse moved 100px!");
        totalDistance = 0;
    }
    
    oldCursorX = e.clientX;
    oldCursorY = e.clientY;
});

.d {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 100px 100px 0 0;
    border-color: #e54646 transparent transparent transparent;
}
.s { display: flex; }
.p1 { margin-left: 100px; }
.p2 { margin-right: 20px; padding-top: 20px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="p1">100px X</p>
<div class="s">
    <p class="p2">100px Y</p>
    <div class="d"></div>
</div>