How to stop ''Propagation'' on parent click triggers?

Design help Custom code
1

Hey guys, I’d like to prevent parent element from getting triggered ‘‘clicked’’ when child element being -intentionally- triggered (mouse click)
both elements have mouse click trigger but I only want child to be triggered when the parent is opened (check read only like)
I tried to make the Child absolute position and change index value but it didn’t help

I found this solution online but couldn’t really apply it in Webflow:

<div className="classname" onClick={(event) =>
    event.stopPropagation()
    console.log("classname div")
 }>
    classname
</div>

any tips on how to fix this?

in the screenshot you can see the child element I want to trigger (blue box)

thanks in advance for any help :pray:t4:

Screenshot 2022-08-08 at 12.59.26
Screenshot 2022-08-08 at 12.59.261920×1005 59.6 KB

Here is my site Read-Only: [LINK](Webflow - Hamad's Portfolio)

2

Hey guys, I fixed this with moving the child element to be sibling element to the other trigger-able element.
but I am still very interested to know how to fix this in context (Parent and child element) if we can’t move child to be sibling

3

I got this to work. Paste this code in your Before Body Tag. And wrap the entire thing in script tags.

var Webflow = Webflow || ;
Webflow.push(function () {
// Logic to stop event bubbling when rich text is clicked
const timelineTexts = document.querySelectorAll(“.common_timeline_copy”);
timelineTexts.forEach((timelineText) => {
timelineText.addEventListener(“click”, (e) => {
e.stopPropagation();
});
});
});

Replace “common_timeline_copy” with the class of elements you want to stop the click propagation at.