Angular не запускает событие (щелчок) на пустой части div

Question

У меня есть div с двумя рядами, а часть второго ряда короче.Однако я хочу, чтобы весь прямоугольник div был кликабельным, точно так же, как теперь он HOVERABLE.Как мне это сделать?Похоже, что Angular полностью игнорирует щелчок в пустой области, но подтверждает зависание над ВСЕЙ областью.Странный.Любые предложения, ребята?Заранее спасибо!Это шаблон:

                    <div class="graphItemTitle" (dblclick)="graphItemDoubleClicked(gs)" (click)="graphItemClicked(gs)">
                        <span class='ds-time-dimension'>{{gs.data.time_dimension_name}}</span> <span class='ds-title'>{{gs.data.title}}</span> <br>
                        <span [innerHTML]="gs.data.datasets[0].label | lf2br | safeHtml"></span>
                    </div>

А код - это просто alert("hi"); внутри метода graphItemClicked().Как я уже сказал, это работает, когда я нажимаю на текст внутри div, но не на весь прямоугольник, что я и хочу.

Answer 1

Проблема заключалась в том, что другая часть html покрывала эту часть поля. Сняв его, оно сработало!

Answer 2

Если используется свойство CSS pointer-events: none, оно

дает указание событию мыши пройти «через» элемент и нацелить все, что находится «под» этим элементом. MDN веб-документы

Это относится ко всем элементам дерева DOM, которые находятся под ним.

Решение состоит в том, чтобы отказаться от использования pointer-events: none и быть более детализированным относительно привязки событий (click) или привязки к элементу выше.

Минимальное воспроизведение: https://stackblitz.com/edit/angular-nserht