Когда я делал нечто похожее (но с интерактивными картами), я слушал событие на самом холсте. Брал из события координаты (event.pageX и event.pageY) и по ним искал вхождение в нужный мне элемент на холсте (я хранил координаты элементов в памяти). Вот код моей функции:
$("#myCanvas").on("click", function(event){
var pt = [event.pageX, event.pageY];
var elem = findP(pt);
});
function findP (pt) { // polygons это массив элементов (объекты с данными и координатами), в которых хранятся координаты вершин многоугольников (points).
for (var z = 0; z < polygons.length; z++) { var polyz = polygons[z].points;
for(var c = false, i = -1, l = polyz.length, j = l - 1; ++i < l; j = i)
((polyz[i][1] <= pt[1] && pt[1] < polyz[j][1]) || (polyz[j][1] <= pt[1] && pt[1] < polyz[i][1]))
&& (pt[0] < (polyz[j][0] - polyz[i][0]) * (pt[1] - polyz[i][1]) / (polyz[j][1] - polyz[i][1]) + polyz[i][0])
&& (c = !c);
if (c) return polygons[z].properties;
} return null;
}
Можно смело заменить событие click на hover/mouseover, код будет такой же. Только стоит добавить debounce или throttling на обработчик, чтобы снизить нагрузку.
Простой