How to stop event propagation with inline onclick attribute?

Question

Consider the following:

something inside the header

How can I make it so that when the user clicks the span, it does not fire the `div`'s click event?

Answer 1

Hi there. This should do the job:

<style>

div {

width: 200px;

height: 200px;

padding: 5px;

background: blue;

color: white;

}

#child {

width: 100px;

height: 100px;

margin: 25px auto;

padding: 5px;

background: red;

color: white;

}

</style>

<div onclick="parentClick(event)"id="parent">

parent

<p onclick="childClick(event)" id="child">child</p>

</div>

<script>

function childClick(e) {

e.stopPropagation();

console.log(e.target); // logs the child

}

function parentClick(e) {

console.log(e.target); // logs the parent

}

</script>