JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<h2>Open the JS console and look at the messages</h2>
	<p>You should notice that when the element text changes
		between mouse down and up, the click event doesn't fire.
        It's hard to reproduce on a trackpad that doesn't have a
        physical button (or clicks like the Apple ones.)
    </p>
	<table>
		<tr>
			<td id="theCell">TEST</td>
		</tr>
	</table>
    <div id="el"></div>
    <input type="number" value="15" name="interval" />
	
        
</body>

CSS

#theCell, #el {
    background-color:#0f0; 
    width: 100px; 
    text-align: center;
}

JavaScript

$(function(){
			var tmr, $el = $('#theCell, #el'), $intr = $('[name=interval]');

			$el.on('click mousedown mouseup', function(event){
				event.stopPropagation();
				console.log(event.type, $el.html());
			});

			$intr.change(resetTimer);

			function resetTimer(){
				var intr = parseInt($intr.val(), 10) || 100;
				if(tmr){
					clearInterval(tmr);
				}
				tmr = setInterval(update, intr);
			}

			function update(){
				$el.html(Math.round(Math.random()*100));
                // using the following line instead seems to work
				//$el[0].innerHTML = (Math.round(Math.random()*100));
			}

			resetTimer();

});