How to intercept mouse events on an overlaid element?

Question

JavaScript

There is a canvas element that needs events like mousemove/down/up/out/click/dblclick (if you push it, you can shorten it to move/up/out)
But on top of it are all sorts of other elements that also need at least a click.
Everything is, of course, absolute/relative positioned.
All the html on top of the canvas is fairly random (not much controlled by me as the author of the module).
The question is how to handle events that fall on elements on top of the canvas and are "eaten" by them?
Implementation technology - angular. That is, I sculpt directives that coexist with "custom" code that I don't control, but which I can impose some conditions on - for example, wrap it in a wrapper element with my directive.
But the essence of the problem lies in the misunderstanding of the "routing" of events.
PS sample setup: https://embed.plnkr.co/lKHjED/

Answer 1

Wrap the html that "eats" the events in a directive that will listen for those events and call a service that will provide the ability to subscribe to them.
Type

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

It's in the canvas directive

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

With the help of angular-tiny-eventemitter the task is elementary