JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tr>
  <td><div id="a">a <div id="b">b <div id="c">c</div></div></div></td>  
</tr>
</table>

CSS

#a, #b, #c {
  padding: 10px;
  margin: 10px;
}

#a {
  border: solid 1px red;
}

#b {
  border: solid 1px green;
}

#c {
  border: solid 1px blue;
}

JavaScript

var clickHandler = function (e) {
  e.stopPropagation();
	alert('click ' + this.id);
};

var mouseupHandler = function (e) {
  e.stopPropagation();
	alert('mouseup ' + this.id);
};

$(function () {
	$('#a').on('click', clickHandler).on('mouseup', mouseupHandler);
  $('#b').on('click', clickHandler).on('mouseup', mouseupHandler);
  $('#c').on('click', clickHandler).on('mouseup', mouseupHandler);
});

/*
var a = document.getElementById('a');
var b = document.getElementById('b');
var c = document.getElementById('c');

a.addEventListener('click', handle);
b.addEventListener('click', handle);
c.addEventListener('click', handle);
*/