title: How to stop 'Click' event from being triggered when dealing with nested components
body: <p>What I'm trying to do:</p>
  
  <ul>
  <li>Create a 'resize' angular directive that allows the user to drag borders of DOM elements and call custom application logic (done)</li>
  <li>ensure clicks don't bubble up to parent components.</li>
  </ul>
  
  <p>stackblitz link -> <a href="https://stackblitz.com/edit/angular-xfofgu" rel="nofollow noreferrer">stackblitz example</a></p>
  
  <p>The component hierarchy is as such</p>
  
  <ul>
  <li>app.component > parent.component > child.component (the child component uses the 'resize' directive)</li>
  </ul>
  
  <p>in the 'resize.directive'. </p>
  
  <ul>
  <li>the mousedown event is captured and <code>event.stopPropagation()</code> &amp; <code>event.preventDefault()</code> are used to prevent event bubbling </li>
  <li>the mousedown event is only capture if the user's mouse is over the borders</li>
  </ul>
  
  <p>the child.component</p>
  
  <ul>
  <li>is a simple div the uses the 'resize' directive</li>
  </ul>
  
  <p>the parent component</p>
  
  <ul>
  <li>uses <code>@HostListener('click', ['$event'])</code></li>
  <li>I need to listen to 'click' events on the parent container to identify when it has been selected. so I can't simply get rid of it.</li>
  </ul>
  
  <p>as you mouse over the inner child component, you can click to drag and resize the borders of the element. what I'm struggling with is the event propagation of the 'click' handler in the parent component.  </p>
  
  <p>My issue is that the <code>@HostListener</code> click event is being fired from the parent component, when I'm not expecting it to be. i.e. if you drag the borders of the child component. on mouse up, the click event of the <code>ParentComponent</code> is fired. </p>
  
  <p>My understanding is that</p>
  
  <ul>
  <li>to prevent event propagation of an click event, it should be captured at the mousedown event.  hence <code>stopPropagation()</code></li>
  </ul>
  
  <p>yet the parent component is still pickup the click event.</p>
  
  <p>There is a lot of comments around using <code>return false</code>. however, based on other issues, that doesn't seem to be the cause, as indicated here.</p>
  
  <ul>
  <li><a href="https://medium.com/@jacobwarduk/how-to-correctly-use-preventdefault-stoppropagation-or-return-false-on-events-6c4e3f31aedb" rel="nofollow noreferrer">StopPropagation vs prevent Default</a></li>
  <li><a href="https://stackoverflow.com/questions/30473581/when-to-use-preventdefault-vs-return-false">When to use PreventDefault( ) vs Return false? [duplicate]</a></li>
  </ul>
  
  <p>that being said, even if I add <code>return false</code> to the directive, the event still bubbles up. </p>
  
  <p>Any insights into what I might be missing is appreciated.</p>