Clickable div inside another clickable div

Question

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?

Answer 1

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.

Answer 2

You have to set stopPropagation to the second div inside the click function.

function div(event){
    event.stopPropagation();
}
<div onClick='div()'>

This will solve your problem

Answer 3

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();