JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <button class="btn1">Qlick me1</button>
  <button class="btn2">Qlick me2</button>
</div>

CSS

div {
  width: 200px;
  height: 200px;
  background-color: #eee;
  border: 1px solid black;
}
.activeClass {
  background-color: red;
}

JavaScript

$(function(){
	$('div').each(function(e){
        $(this).mousedown(function(e){
	        $(this).addClass("activeClass");
        }).mouseup(function(e){
	        $(this).removeClass("activeClass");
        });
    });
	$('div .btn1').each(function(e){
        $(this).mousedown(function(e){
            e.stopPropagation();
        }).mouseup(function(e){
            e.stopPropagation();
        });
    });
	$('div :not(.btn1)').each(function(e){
        $(this).mousedown(function(e){
	        $(this).parent().addClass("activeClass");
        }).mouseup(function(e){
	        $(this).parent().removeClass("activeClass");
        });
    });
});