Javascript- Onmouseup Event Handler

The Onmouseup function in Javascript is an event handler that is triggered when a user places the cursor of a mouse over an element and presses down on the mouse button and releases it.

So the user just has to click the mouse button down and release it in order for the onmouseup event handler to be triggered.

The onmouseup event will be triggered when the mouse is over the element and clicked down on, with the click then being released. This is either a left click or a right click. It doesn't matter; both will trigger the onmouseup() event.

This event handler is similar to the onmousedown event handler, except that the click has to be released.

This can be used with practically any HTML element, such as a link, an image, a paragraph, a header, etc.

When triggered, this event handler can be programmed to do anything.

As an example, look at the image below.

It is a mars rover exploring Mar's surface.

Now place the cursor of the mouse over this image and click down it and then release the click. It will then show an image of the mars rover with its infrared laser. If you're interested in this feature of the mars rover, you can visit the wikipedia link here. However, this is not the point of this article. It's to learn Javascript.

Place your mouse cursor over this image and click down, releasing the click, to see it change

This is the power of the onmouseup() function.

HTML Code

The HTML code to create the original image above before it is converted to the version with the laser is:

<img src="/images/mars-rover-no-laser.png"
id="image"
onmouseup="changeimage()">

The <img> tag must have an id attribute, which in this case is image. It also a onmouseup function attached to it. When triggered, this function will call the changeimage() function. This changeimage() function changes the image from the mars rover with no laser to the image of the mars rover with the laser. The script for this function is shown below in the Javascript code.

Javascript Function

The script for the changeimage() function is:

<script>
function changeimage()
{
document.getElementById("image").src="/images/mars-rover-laser.png";
}
</script>

This script takes the image with an id of image and changes the src attribute so that the image changes from the mars rover with no laser to the mars rover image with the laser.

Second Example

A second example of the use of a onmouseup function is shown below, this time with a link.

When a user scrolls over the link with his or her mouse cursor and clicks down on the link and releases the click, it creates an alert pop-up box stating that the user has scrolled over and clicked on the link.

Scroll over and click on this link

You can see again the use of the onmouseup function. When an element is scrolled over with a mouse cursor and clicked down on, this event handler is triggered, and we can program it so that it can do anything. In this case, it creates a pop-up alert box.

Code

The code to create the link above with its onmouseup effect is:

<a href="http://www.learningaboutelectronics.com" onmouseup="alert('You scrolled over the link and clicked it')"> Scroll over and click on this link

Since a pop-up alert box is created when you scroll down the link, it is pretty much impossible to actually click through to get to where the link is trying to redirect you. Therefore, it isn't a very practical example, just used for demonstration purposes.

Related Resources

HTML Comment Box is loading comments...

Learning about Electronics

Javascript- Onmouseup Event Handler

HTML Code

Javascript Function

Second Example

Code