JavaScript mousemove事件触发

Question

Is there a way using mousemove event to capture every pixel that the cursor collides with? so that the following condition would fire consistently.

if(e.pageX == 100) 

I find that if the mouse moves fast then it skips pixels in between.. however if I move it slowly it will catch pixels one by one.

Thanks

Answer 1

Mousemove triggers on every mouse movement and targets the topmost and most nested element which is covered by mouse. Mousemove, mouseover and mouseout trigger when browser internal timing allows only . That means if you move the mouse fast, intermediate DOM elements and parents will be skipped.

So you can move over an element without any mousemove/mouseover triggered on it.

You also can move from a child through parent without any mouse event on the parent as browser skips intermediate elements

The only guarantee you have is that as far as mouseover was triggered, the mouseout will trigger too.

Answer 2

No.

Mouse cursor is checked and if the position has changed since last time a mousemove event is triggered, but only with the new detected position.

What you can do is storing the last known mouse position and the compute a straight line between that and the current position to do your computations. This doesn't require much code... a simple approach is

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

and can be used as

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