JSFiddle - React, Tailwind, and code Playground

HTML

<p>A idéia é que ao clicar em qualquer parte do site mudar a cor para amarelo.</p>
<span>Mas se clicar no "div.teste" ou seus filhos não fazer nada.</span>
<br /><br />
<div class="teste">
    <ul>
        <li>Amarelo</li>
        <li>Amarelo</li>        
    </ul>
</div>

CSS

.teste {padding:20px;background:#f00;color:yellow}

JavaScript

$(function(){
    $('html > *').not('.teste > *').click(function(e){
        e.stopPropagation();
        
        $('.teste').css({
            'background':'#'+(Math.random()*0xFFFFFF<<0).toString(16)
        });
    });
});