Question: The return value of event.composedPath() contains property keys that are difficult to retrieve. I've tried everything I know and can't get to them.
In the simplified example below I used Object.getOwnPropertyNames() to return an array of all properties on the object. the first alert box shows the values, 0,1,2,3,4,5,length. The second alert box is blank.
<div style="width: 200px; height: 200px; background-color: yellow">
<a data-target="0" href="">click me</a>
</div>
<script>
document.querySelector('[data-target]').addEventListener( 'click', event => {
const elementsInPath = event.composedPath();
alert(Object.getOwnPropertyNames(elementsInPath));
alert(Object.getOwnPropertyNames(elementsInPath[0]));
});
</script>
Output: In Devtools I put a watch on elementsInPath. The output below is what shows up. I'm trying to return the strings, "a" "div" "body" "html" "document" "window". As shown above they aren't listed with getOwnPropertyNames(). I've tried every normal targeting method to retrieve these and I can't get to them. Ultimately what I'm trying to do is determine if an anchor 'a' is in the path so I can use event.preventDefault() to end the event.