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>

    <div id="el">0</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 = $('#el'), $intr = $('[name=interval]');
            //for comparison, addung event handlers without jquery
            $(el)[0].addEventListener('click', function(){
                console.log('via addEventListener click', $el.html()); 
            });
            $(el)[0].addEventListener('mousedown', function(){
                console.log('via addEventListener mousedown', $el.html()); 
            });
            $(el)[0].addEventListener('mouseup', function(){
                console.log('via addEventListener mouseup', $el.html()); 
            });
    
			$el.on('click mousedown mouseup', function(event){
				event.stopPropagation();
				console.log('via jquery ' + 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(){
                var num = Math.round(Math.random()*100);
                //works
 				//$el.text(num);
                //works
                //$el[0].innerHTML = num;
                //works
                //$el[0].removeChild($el[0].firstChild);
 				//$el[0].appendChild(document.createTextNode(num));
                //works
                //$el.html(""+num);
                //fails
				$el.html(num);

			}

			resetTimer();

});