JSFiddle - React, Tailwind, and code Playground

HTML

<div class="foobar">
    <div></div>
    <div></div>
</div>

CSS

html, body {
    height : 100%;
}
.foobar {
    width : 100%;
    height : 100%;
    background : blue;
}
.foobar div {
    width : 100px;
    height : 100px;
    background : red;
}

JavaScript

//bind `click` event handler to the `.foobar` element to do work,
//then find the children of all the `.foobar` elements
//and bind a `click` event handler to them that stops the propagation of the event
$('.foobar').on('click', function () { alert('You clicked on the `.foobar` element.'); }).children().on('click', function (event) {
    event.stopPropagation();
    //you can also use `return false;` which is the same as `event.preventDefault()` and `event.stopPropagation()` all in one (in a jQuery event handler)
});