JSFiddle - React, Tailwind, and code Playground

HTML

<button id="button">Click Me</button>
<div>
  Time of last mousedown: <span id="mousedown-time"></span>
</div>
<div>
  Time of last mouseup: <span id="mouseup-time"></span>
</div>
<div>
  Time between events: <span id="time-difference"></span>
</div>

JavaScript

var button = document.getElementById("button"),
    mousedownTime;

button.addEventListener('mousedown', function (e) {
  mousedownTime = e.timeStamp;
  document.getElementById("mousedown-time").innerHTML = mousedownTime;
  document.getElementById("time-difference").innerHTML = '';
  hotSleep();
});

button.addEventListener('mouseup', function (e) {
  var mouseupTime = e.timeStamp,
      timeDifference = mousedownTime - mouseupTime;
  document.getElementById("mouseup-time").innerHTML = mouseupTime;
  document.getElementById("time-difference").innerHTML = timeDifference;
});

/*
  Hot-sleeps for 1 second when called.
  
  In a real life scenario, this might be some expensive numerical
  computation, or some DOM manipulation code.
*/
function hotSleep () {
  var startTime = new Date().getTime();
  while (new Date().getTime() < startTime+1000) {}
}