Question

有没有办法使用mousemove事件捕获光标碰撞的每个像素？这样以下情况就会持续发生。

if(e.pageX == 100)

我发现如果鼠标快速移动则会跳过中间的像素..但是如果我慢慢移动它会逐个捕捉像素。

由于

Answer 1

Mousemove会在每次鼠标移动时触发，并定位鼠标覆盖的最顶层和最嵌套的元素。当浏览器内部时间仅允许时， Mousemove，mouseover和mouseout触发器。这意味着如果你快速移动鼠标，将跳过中间DOM元素和父元素。

因此，您可以在没有触发任何鼠标移动/鼠标悬停的情况下移动元素。

当浏览器跳过中间元素
时，您也可以从父级移动到父级而不在父级上发生任何鼠标事件
唯一的保证是，只要触发鼠标悬停，鼠标输出也会触发。

Answer 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);
});

Javascript mousemove事件触发

2 个答案: