JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">#container
    <div class="exclus">#exclus
        <div class="enfant">#enfant
        </div>
    </div>
</div>

CSS

body,div {
    padding:50px;
}
body { background-color: gray; }
#container { background-color: darkgray; }
.exclus { background-color: lightgray; }
.enfant { background-color: white; }

JavaScript

(function($){
  var excluded = $([]);   

  $.event.special.clickout = {  
    setup: function(data){
      if(excluded.size()===0){
        $(document).on("click", $.event.special.clickout.handler);
      }
      $(this).data('outlimit', data && data.outlimit ? data.outlimit : document.body);        
      excluded = excluded.add(this);
    },
    teardown: function(data){
      $(this).removeData('outlimit');
      excluded = excluded.not(this);
      if(excluded.size()===0){
         $(document).off("click", $.event.special.clickout.handler);
      }
    },    
    add: function(handleObj){
      var old_handler = handleObj.handler;
      handleObj.handler = function(event,elm){
        event.target = elm; //redirect event
        old_handler.apply(this, arguments);
      };
    },
    handler: function(event){
      excluded.each(function(e,elm){
        var out = $(elm).data('outlimit') || document.body;
        if($(event.target).closest(elm).size() === 0 &&
           $(event.target).closest(out).size() !==0 ){
          //triggerHandler: stop event bubbling
          //extra parameters: click event target
          $(elm).triggerHandler( 'clickout', [ event.target ] );
        }
      });
    }      
  };
})(jQuery);
  

$(".exclus").on("clickout", {outlimit:"#container"}, function(event){
    console.dir(event);
    $(this).fadeOut(200).fadeIn(200);
});
    
$("#container").on("clickout", function(event){
    console.dir(event);
    $(this).fadeOut(200).fadeIn(200);
});