Как перехватить мышиные события в перекрытом элементе?

Question

[Максим Васильев]

Есть элемент canvas, которому нужны события типа mousemove/down/up/out/click/dblclick (если поднапрячься, можно сократить до move/up/out)
Но поверх него расположены всякие другие элементы, которым тоже нужен, как минимум, клик.
Всё, естественно, absolute/relative positioned.
Весь html поверх канваса - достаточно рандомный (не особо контролируемый со стороны меня как автора модуля).

Вопрос - как обработать события, которые попадают на элементы поверх канваса и ими "съедаются"?

Технология реализации - angular. Тоесть я ваяю директивы, которые сосуществуют с "пользовательским" кодом, который я не контролирую, но на который могу наложить какие-то условия - например, звернуть его в обёрточный элемент с моей директивой.

Но суть проблемы - в непонимании "маршрутизации" ивентов.

P.S. примерный сетап: https://embed.plnkr.co/lKHjED/

Answer 1

[_ _]

Заверните html, который "съедает" события, в директиву, которая будет слушать эти события и вызывать сервис, который будет предоставлять возможность подписаться на них.

Типа

<proxy-events on="['click', 'mousemove', 'touchstart']" id="eventGroup1">
  ...
</proxy-events>

Это в директиве canvas

EventProxy.subscribe('eventGroup1', function(eventType, event) {
  console.log(eventType, event);
});

С помощью angular-tiny-eventemitter задача элементарная

Comments

[Максим Васильев]

Это означает, что в пользовательский код вместо ng-click надо будет вставлять лютый ад с попиской на клики. Неприемлемо.

[_ _]

Максим Васильев: не совсем понятно, какой именно пользовательский код вы имеете в виду - тот, что вы будете оборачивать? Если да, то вы неправы, в нем вообще ничего менять не надо будет.
И приложите уже пример на codepen с примером разметки

[Максим Васильев]

Александр Марченко: добавил ссылку на планкер