Clickable div inside another clickable div-CodePudding

I have a div that is clickable and when I hover over this div another clickable div appears. However when I try to click this new clickable it will trigger only the parent div clickable. How do I make it to where I can click the new button instead of the parent div clickable?

CodePudding user response：

Call the following methods in the click handler for the nested div, and it should stop propagation to the parent click event

e.preventDefault();
e.stopPropagation();

CodePudding user response：

I think this is the one you're looking for https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_stoppropagation (in this demo, you need to tick on the checkbox on UI)

You can put e.stopPropagation() in your child element's click.

According to this document

The stopPropagation() method prevents propagation of the same event from being called. Propagation means bubbling up to parent elements or capturing down to child elements.