Javascript mousemove 事件触发答案

【问题标题】：Javascript mousemove event firingJavascript mousemove 事件触发
【发布时间】：2015-02-08 08:40:05
【问题描述】：

有没有办法使用 mousemove 事件来捕捉光标碰撞的每个像素？以便以下条件始终触发。

if(e.pageX == 100)

我发现如果鼠标移动得很快，它会跳过中间的像素。但是如果我慢慢移动它，它会一个接一个地捕捉像素。

谢谢

【问题讨论】：

你想达到什么目的？如果将条件更改为>=，则可以检测到边缘。见这里：jsfiddle.net/e0x2mmzc

标签： javascript jquery

【解决方案1】：

Mousemove 在每次鼠标移动时触发，并针对鼠标覆盖的最顶层和最嵌套的元素。 仅在浏览器内部计时允许时触发鼠标移动、鼠标悬停和鼠标移出。这意味着如果你快速移动鼠标，中间的 DOM 元素和父元素将被跳过。

因此您可以在元素上移动而不触发任何 mousemove/mouseover。

当浏览器跳过中间元素时，您还可以在父级上没有任何鼠标事件的情况下从子级移动到父级

您唯一的保证是，只要触发了 mouseover，mouseout 也会触发。

【讨论】：

我想每隔 100px 检查一下左上角的元素是否通过所以： element.position().left % 100 == 0
正如我所说，它与像素无关，它是时间限制，可能因浏览器而异，所以你不能指望它是一致的，你不能假设例如，在 1 秒内只能处理 10 个 mousemove 事件。
是的，我知道 :( 只是想有人可能知道解决方法。无论如何感谢您的帮助。

【解决方案2】：

没有。

检查鼠标光标，如果自上次触发 mousemove 事件后位置发生变化，但仅限于新检测到的位置。

您可以做的是存储最后一个已知的鼠标位置并计算该位置与当前位置之间的直线以进行计算。这不需要太多代码......一个简单的方法是

// Calls `f(x, y)` for each point starting from
// `(x0, y0)` and ending in `(x1, y1)` (excluded)
// moving along an 8-connected straight path.
function processLine(x0, y0, x1, y1, f) {
    var ix = x0 < x1 ? 1 : -1, dx = Math.abs(x1 - x0);
    var iy = y0 < y1 ? 1 : -1, dy = Math.abs(y1 - y0);
    var m = Math.max(dx, dy), cx = m >> 1, cy = m >> 1;
    for (var i=0; i<m; i++) {
        f(x0, y0);
        if ((cx += dx) >= m) { cx -= m; x0 += ix; }
        if ((cy += dy) >= m) { cy -= m; y0 += iy; }
    }
}

并且可以作为

processLine(10, 20, 30, 35, function(x, y) {
    console.log("x=" + x + ", y=", y);
});

【讨论】：