onmousedown over-rides onmouseup and onclick

Question

Consider the following demo code:

<p id="demo" style="border: 1px solid black;width:300px;height:300px"></p>

<script>
  document.getElementById("demo").onmousedown = function(e){ alert('mousedown'); }
  document.getElementById("demo").onmouseup = function(e){ alert('mouseup'); }
  document.getElementById("demo").onclick = function(e){ alert('click'); }
</script>

Can someone please explain to me why neither the mouseup nor click events get fired?

Answer 1

When you press your mouse button down, you are triggering an alert which is blocking. Since alert is blocking, it isn't allowing your event handler to trigger once again when you release the click.

EDIT* - If you press your mouse down, and then press enter to quit the alert. When you release your mouse click you will see the mouse up event being triggered.