Как обработать события (click) и (wheel) над элементом «object» в Angular 7?

Question

[Станислав Пыряев]

Добрый день.

Не могу понять, почему не срабатывают события (click) и (wheel) над тегом <object type="image/svg+xml"> с SVG.
Всю голову сломал.
Весь код на stackblitz.com.
Там svg почему-то не прорисовывается, я блоки выделил границами.

Если точнее, почему события не срабатывают даже на родительском элементе, если внутри него
кликать над <object>, но если кликать на родителя не попадая на <object>, то события срабатывают и обрабатываются нормально?

Подскажите, как обрабатывать подобные события в компонентах Angular 2-7?

Answer 1

[Антон Швец]

Вы в девтулз смотрели? Содержимое object это уже другой документ, события из него не попадают во внешний документ.
Angular 8 позволяет указывать svg в качестве шаблона для компонента, может быть это вам поможет.
Или вставить svg тэги напрямую в html, ангуляр тоже сможет с ними работать.

Answer 2

[grinat]

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