If the user clicks on the page while some JS code is running, what exactly does the browser do?

Suppose you have a button with an event listener that has a very long execution time. For the sake of simplicity, let’s just take this code as an example.

HTML

<div>
  <button>Click this</button>
</div>

JS

function sleep(millis) {
    var date = new Date();
    var curDate = null;
    do { curDate = new Date(); }
    while(curDate-date < millis);
}

addEventListener("DOMContentLoaded", (event) => {
    document.getElementsByTagName("button")[0].addEventListener("click", (e) => {
    sleep(2000);
    e.target.parentElement.innerHTML = "Clicked";
  });
});

I have noticed that in this example if you make a double click in the middle of the button, you end up with the “Clicked” text selected.

So if I understand correctly, if the user makes a double click, the browser does not queue another click event for the button. Instead, it only records the coordinates of the click, and processes it later, after the JavaScript code that is currently being ran finishes. So, for example, if at that time there is another button, then the click event of that button is going to fire.

Is this correct?

Is this behaviour consistent among all major browsers?

Are there any sources where this is documented in detail?