JSFiddle - React, Tailwind, and code Playground

by adeneo

HTML

<div id="test">Click does nothing here
    <div class="test2">or here</div><div class="test2">or here</div>
</div>

<div id="test3">But here or anywhere<div>

CSS

#test {position: absolute; height: 200px; width: 200px; background:red; color: #fff}

.test2 {position: relative; height: 60px; width: 60px; margin: 20px; background: blue;}

#test3 {position: absolute; height: 200px; width: 200px;  background: green; top: 230px;}

JavaScript

$(document).on('click', function(e) {
    if (!(e.target.id=='test' || $(e.target).parents('#test').length>0)) {
        alert('Yes, it works!');
    }
});