Как предотвратить возникновение событий в Angular 8?

Question

Пожалуйста, поймите, я новичок в Angular и в целом развиваюсь, так что это может быть очень неопытной проблемой.

Проблема в том, что я вызываю функцию из файла шаблона HTML компонента с $ event в качестве аргумента, и он в итоге захватывает элемент, отличный от того, на который я хотел нацелиться. Точный элемент, для которого я вызываю событие, имеет двух детей ...

HTML:

          <div class="cursorPointer" (click)="answeredQuestion($event)">
                <div id="chickenTenders" class="backImageCov question_0Img"></div>
                <h3 class="questionSubTitle">Chicken Tenders</h3>
           </div>

Я собираюсь получить контейнер div с "cursorPointer" каждый раз, когда я называю это событие. Я предполагаю, что это проблема с пузырями событий, потому что, если бы я щелкнул по контейнеру div с идентификатором "chickenTenders", тот же контейнер будет возвращен аргументом $event в функции answeredQuestion() в моем файле ts .. .

Я уже искал в Интернете ( Остановить распространение событий мыши ), но в этом примере студент задает вопрос, полученный из директивы, поэтому я запутался в том, каким может быть решение ...

Я уже пробовал:

(click)="answeredQuestion(0, $event);false"

И:

(click)="answeredQuestion(0, $event); $event.stopPropagation()"

Однако, похоже, никто не помогает этой причине. Проще говоря, я надеюсь, что решение дало бы мне простой способ получать доступ к этому родительскому элементу (<div class="cursorPointer">) каждый раз, даже если щелкали дочерние элементы.

Спасибо за ваш время, ребята, я ценю это.

Answer 1

Вы можете использовать ссылочную переменную шаблона , чтобы получить ссылку на нужный элемент.

<div #clickElement class="cursorPointer" (click)="answeredQuestion(clickElement)">

Answer 2

Что если вы отключили события указателя для дочерних элементов с помощью CSS?

.cursorPointer > div, .cursorPointer > h3{
    pointer-events: none;
}

Или лучше:

.cursorPointer > * {
    pointer-events:none;
}