During a click event on an html element, I am trying to see whether the element clicked is one particular element.

This particular element is a child element, whose parent also has a click listener. I am trying to prevent the click listener on the parent from also firing.

This seems like exactly what event.stopPropagation() is for, but I am curious...

1. If there are any drawbacks to using event.stopPropagation()? (This seems to achieve the desired outcome)
2. If anybody can tell me if the eventTarget objects returned by event.composedPath() (which should be html elements) are deep copies of the actual DOM elements?

For question #2, I am having trouble finding anything in docs or online to answer this.

https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget

const path = event.composedPath();
const heart = document.querySelector('div.heart') as HTMLElement;

if (path.includes(heart)) {
      //I don't want to continue execution, but the html element 'heart' is apparently not part of
     //the Event Target array returned by event.stopPropagation(), even though I can 
     //clearly see it is (or maybe it is just a deep clone?)
     return; 
 }