Обработка событий мыши на объектах неправильной формы с делением события

Question

Мне нужно обработать события мыши на странице, где есть несколько объектов неправильной формы (например, дома), уложенные друг на друга. Если я использую обычный способ делегирования jQuery .on(), источник события, который будет отправлен, всегда будет самым большим объектом, даже если пользователь нажал на прозрачную часть объекта (или изображения).

Пример: тег, содержащий красный треугольник, всегда будет источником события, даже если я нажму на позицию X.

Я могу обнаружить, что мышь не находится внутри треугольника. Мне нужен способ «переслать» событие в зеленый треугольник ниже.

EDIT: Мой текущий подход поймать события на большом DIV, который охватывает все, а затем использовать селектор JQuery и сравнить координаты, чтобы выяснить, какой объект находится под указателем мыши, а затем проверить, если мышь находится в прозрачной части или нет. Он работает нормально, но, кажется, медленный и потребляет много памяти, особенно с событиями перемещения мыши, которые непрерывно запущены.

EDIT 2: Этот образ был извлечен из Building a game engine with jQuery, и мой подход был почти идентичен. И вот, это вопрос:

Answer 1

Вы рисуете сложную графику с использованием простых элементов HTML? Не уверен в ваших точных потребностях, но может иметь смысл использовать SVG или Canvas, где намного легче будет захватывать события щелчка по фигурам.