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?

Your code fires all handlers when I tried it here: [http://jsfiddle.net/b2Lk6jsn/](http://jsfiddle.net/b2Lk6jsn/) — rdubya, Nov 27 '14 at 01:46

score 2 · Accepted Answer · answered Nov 27 '14 at 01:47

2

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.

answered Nov 27 '14 at 01:47

Eric E

572
1
4
16

2

Another way to test it is to use console.log instead and all 3 should fire. – Alexus Nov 27 '14 at 02:00

onmousedown over-rides onmouseup and onclick

1 Answers1

Linked