javascriptonmouseup

Why the effect of onmouseup never take effect?

I find the following information on w3schools regarding with The onmousedown, onmouseup and onclick Events: The onmousedown, onmouseup, and onclick events are all parts of a mouse-click. First when a mouse-button is clicked, the onmousedown event is triggered, then, when the mouse-button is released, the onmouseup event is triggered, finally, when the mouse-click is completed, the onclick event is triggered.

Later I write the following code to test but the onmouseup event never happens? It only displays 'clicked' after I released the click, but the "Thank You a lot" never appears. Anyone could please clarify that for me? Thank you. 

<!DOCTYPE html>
<html>
<body>

<div onmousedown="mDown(this)" onmouseup="mUp(this)" onclick = "mClick(this)" style="background-color:#D94A38;width:90px;height:20px;padding:40px;">Click Me</div>

<script>
function mClick(obj)
{
    obj.style.backgroundColor="#ec5ead";
    obj.innerHTML="Clicked"
}
function mDown(obj)
{
    obj.style.backgroundColor="#1ec5e5";
    obj.innerHTML="Release Me"
}

function mUp(obj)
{
    obj.style.backgroundColor="#FFFFFF";
    obj.innerHTML="Thank You a lot"
}
</script>

</body>
</html>
Solution

  • The mouseup event is firing, it's just that it is immediately followed by the click event, so you don't get a chance to see the thankyou message. If you remove the onclick handler, you'll see the message.