JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer-block">
    <div class="inner-block">
        Inner Block
    </div>
</div>
<label><input type="checkbox" checked="" data-switch="" /> Enable checking</label>

CSS

.outer-block {
    width: 100px;
    height: 100px;
    border: solid 1px #ccc;
    background: #efefef;
}

    .outer-block:hover {
        border-color: #f00;
    }

.inner-block {
    width: 100px;
    height: 100px;
    background: #fccffc;
    border: solid 1px #ccc;
    position: absolute;
    top: 7px;
    right: 7px;
}

JavaScript

var checkEnabled = true;

$('[data-switch]').on('change', function () {
    checkEnabled = !!this.checked;
});

var outerBlock = $('.outer-block').on('click', function (e) {
    if (checkEnabled && !$(e.target).is(outerBlock)) {
        return false;
    }
    
    alert('Clicked on outer block');
});