In my recent research, I came across some interesting information on mouse-click events from w3schools. According to them, the onmousedown, onmouseup, and onclick events are all crucial parts of a mouse-click process. It starts with the onmousedown event being triggered when a mouse-button is clicked, followed by the onmouseup event being triggered when the mouse-button is released, and finally, the onclick event is triggered upon completion of the mouse-click.
After reading this, I decided to test it out myself by writing some code. However, I noticed that the onmouseup event never seems to happen as expected. Even though the text 'Clicked' is displayed after releasing the click, the message "Thank You a lot" never appears. Can anyone provide some insight into why this might be happening? Thank you in advance.
<!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>