how to mimic mouseover listener for xy positions

Question

I have a snap.svg grid of over 1600 20x20 pixel squares and am I'm trying to find the most efficient way of tracking when a moving point is within each. All I can come up with is looping through all the squares looking for isPointInside like so:

for (var t = 0; t < numUnits; t++) {
    var square = squares[t];
    if (Snap.path.isPointInside(square, x, y)) {
        hits[t]++;
        break;
    }
}

It sure would be nice if there was a way to create an event listener on each square like mouseover or hover that would do the job instead.

Answer 1

It may depend how accurate you want this, and whether sampling from the elements could work.

If so, you could use elementFromPoint

   var el = document.elementFromPoint(xArray[j]+8,yArray[j]+8);
   Snap(el).attr({ fill: 'red' });

Note, it doesn't quite match up with yours but is close, I'm guessing due to the offset which may need to be factored in (I just tried with 8)

jsfiddle