title: How to prevent event bubbling in Angular 8?
body: <p>Please understand, I'm new in Angular and developing overall so this might be a very unexperienced problem. </p>
  
  <p>The problem is that I am calling a function from a component's HTML template file with $event as an argument and it ends up capturing a different element from the one I wished to target. That exact element I am calling the event on has two children...</p>
  
  <p>HTML:</p>
  
  <pre><code>          &lt;div class="cursorPointer" (click)="answeredQuestion($event)"&gt;
                  &lt;div id="chickenTenders" class="backImageCov question_0Img"&gt;&lt;/div&gt;
                  &lt;h3 class="questionSubTitle"&gt;Chicken Tenders&lt;/h3&gt;
             &lt;/div&gt;
  </code></pre>
  
  <p>I am aiming to retrieve the div container with <strong><code>"cursorPointer"</code></strong> every single time I call this event. I hypothesize that it's an event bubbling problem because if I were to click on the div container with the id of <code>"chickenTenders"</code>, that same container will be returned by the <code>$event</code> argument in the <code>answeredQuestion()</code>  function on my ts file...</p>
  
  <p>I have already searched online (<a href="https://stackoverflow.com/questions/35274028/stop-mouse-event-propagation">Stop mouse event propagation</a>) but in this example the student is asking a question that came from a directive so I got confused as to what the solution could be...</p>
  
  <p>I have already tried:</p>
  
  <pre><code>(click)="answeredQuestion(0, $event);false"
  </code></pre>
  
  <p>And:</p>
  
  <pre><code>(click)="answeredQuestion(0, $event); $event.stopPropagation()"
  </code></pre>
  
  <p>However, none seem to help the cause. Putting it simply, I hope the solution would give me a simple way to get access to that parent element (<code>&lt;div class="cursorPointer"&gt;</code>) every single time, even if the child elements are the ones clicked.</p>
  
  <p>Thank you for your time guys, I appreciate it.</p>