CODEWITHSUNDEEP
javascriptonmouseup
Huibin Zhang
Huibin Zhang

Reputation: 1110

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>

Upvotes: 1

Views: 230

Answers (2)

jackfrankland
jackfrankland

Reputation: 2062

A click on an element is when you both mousedown and and mouseup on the same element. The mouseup event is being triggered, but the last thing that happens is the click event.

Upvotes: 1

paul
paul

Reputation: 22001

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.

Upvotes: 3

Related Questions