You are here: Reference > JavaScript > client-side > event handling > events > onmouseup

onmouseup event | mouseup event

Browser support:
Occurs when the user releases a mouse button over an element.
The onmouseup event is supported by all browsers for all mouse buttons, but in Opera the right click is disabled for JavaScript by default. The user has the ability to enable it (Tools - Preferences - Advanced - Content - JavaScript Options - Allow script to receive right clicks).
  • To get the released mouse button(s), use the button and which properties of the event object. Example 3 below demonstrates it.
  • If you would like to receive a notification when the user presses a mouse button over an element, use the onmousedown event.
  • If the left mouse button is pressed and released on the same element, an onclick event occurs.

How to register:

In HTML:
<ELEMENT onmouseup="handler">

In JavaScript:
object.onmouseup = handler;
object.addEventListener ("mouseup", handler, useCapture);
9
object.attachEvent ("onmouseup", handler);
You can find the related objects in the Supported by objects section below.
The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.
For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles Yes
Cancelable Yes
Event object MouseEvent

Actions that invoke the onmouseup event:

  • Releasing a mouse button over an element.

The order of events related to the onmouseup event:

Action Event order
Clicking on the left or middle mouse button.
  1. onmousedown
  2. onmouseup
  3. onclick
Clicking on the right mouse button.
  1. onmousedown
  2. onmouseup
  3. oncontextmenu

Example HTML code 1:

This example illustrates the use of the onmousedown and onmouseup events:
<head>
    <script type="text/javascript">
        function OnButtonDown (button) {
            button.style.color = "#ff0000";
        }
        function OnButtonUp (button) {
            button.style.color = "#000000";
        }
    </script>
</head>
<body>
    Click on the following button and see its text color.
    <br />
    <button onmousedown="OnButtonDown (this)" onmouseup="OnButtonUp (this)">Test button</button>
</body>
Did you find this example helpful? yes no

Example HTML code 2:

This example is similar to the previous one, but it uses the addEventListener and attachEvent methods to register event handlers for the onmousedown and onmouseup events:
<head>
    <script type="text/javascript">
        function OnButtonDown (button) {
            button.style.color = "#ff0000";
        }
        function OnButtonUp (button) {
            button.style.color = "#000000";
        }

        function Init () {
            var button = document.getElementById ("testButton");
            if (button.addEventListener) {  // all browsers except IE before version 9
                button.addEventListener ("mousedown", function () {OnButtonDown (button)}, false);
                button.addEventListener ("mouseup", function () {OnButtonUp (button)}, false);
            }
            else {
                if (button.attachEvent) {   // IE before version 9
                    button.attachEvent ("onmousedown", function () {OnButtonDown (button)});
                    button.attachEvent ("onmouseup", function () {OnButtonUp (button)});
                }
            }
        }
    </script>
</head>
<body onload="Init ()">
    Click on the following button and see its text color.
    <br />
    <button id="testButton">Test button</button>
</body>
Did you find this example helpful? yes no

Example HTML code 3:

This example shows how to detect the pressed mouse buttons:
<head>
    <script type="text/javascript">
        function WhichButton (event) {
                // all browsers except IE before version 9
            if ('which' in event) {
                switch (event.which) {
                case 1:
                    alert ("Left button is pressed");
                    break;
                case 2:
                    alert ("Middle button is pressed");
                    break;
                case 3:
                    alert ("Right button is pressed");
                    break;
                }
            }
            else {
                    // Internet Explorer before version 9
                if ('button' in event) {
                    var buttons = "";
                    if (event.button & 1) {
                        buttons += "left";
                    }
                    if (event.button & 2) {
                        if (buttons == "") {
                            buttons += "right";
                        }
                        else {
                            buttons += " + right";
                        }
                    }
                    if (event.button & 4) {
                        if (buttons == "") {
                            buttons += "middle";
                        }
                        else {
                            buttons += " + middle";
                        }
                    }
                    alert ("The following buttons are pressed: " + buttons);
                }
            }
        }
    </script>
</head>
<body>
    <div onmousedown="WhichButton (event);">Press a mouse button over this text!</div>
</body>
Did you find this example helpful? yes no

Example HTML code 4:

This example shows how to detect when the user presses a mouse button over an element but releases the button outside the element:
<head>
    <script type="text/javascript">
        var capturedButton = null;
        function OnButtonDown (button) {
            capturedButton = button;
            if (window.addEventListener) {  // all browsers except IE before version 9
                window.addEventListener ("mouseup", OnButtonUp, true);
            }
            else {
                if (button.setCapture) {    // IE before version 9
                    button.attachEvent ("onlosecapture", OnButtonLoseCapture);
                    button.setCapture ();
                }
            }
        }
        function OnButtonUp () {
            if (capturedButton) {
                if (window.removeEventListener) {   // all browsers except IE before version 9
                    window.removeEventListener ("mouseup", OnButtonUp, true);
                }
                else {
                    if (capturedButton.releaseCapture) {    // IE before version 9
                        capturedButton.detachEvent ("onlosecapture", OnButtonLoseCapture);
                        capturedButton.releaseCapture ();
                    }
                }
                capturedButton = null;
            }
            alert ("The button has been released!");

        }

        function OnButtonLoseCapture () {
            alert ("The button loses the mouse capture!");
            OnButtonUp ();
        }

        function Init () {
            var button = document.getElementById ("testButton");
            if (button.addEventListener) {  // all browsers except IE before version 9
                button.addEventListener ("mousedown", function () {OnButtonDown (button)}, false);
            }
            else {
                if (button.attachEvent) {   // IE before version 9
                    button.attachEvent ("onmousedown", function () {OnButtonDown (button)});
                    button.attachEvent ("onmouseup", OnButtonUp);
                }
            }
        }
    </script>
</head>
<body onload="Init ()">
    Press the following button and release the mouse button somewhere inside or outside the browser.
    <br />
    <button id="testButton">Capture Test</button>
</body>
Did you find this example helpful? yes no

Example HTML code 5:

This example implements a simple spin control:
<head>
    <script type="text/javascript">
        var capturedButton = null;
        var changeTimer = 0;

        function ChangeInput (increase, delay) {
            var myInput = document.getElementById ("myInput");
                // parse the current value
            var value = Number (myInput.value);
            if (isNaN (value)) {
                value = 0;
            }
                // direction
            var dir = increase ? 1 : -1;
                // the new value
            var step = 1;
            value += dir * step;
            if (value < 0) {
                value = 0;
            }
            if (value > 100) {
                value = 100;
            }
            myInput.value = value;

            changeTimer = setTimeout (function () {ChangeInput (increase, 100)}, delay);
        }

        function OnButtonDown (button, increase) {
                // capture mouse up
            capturedButton = button;
            if (window.addEventListener) {  // all browsers except IE before version 9
                window.addEventListener ("mouseup", OnButtonUp, true);
            }
            else {
                if (button.setCapture) {    // IE before version 9
                    button.attachEvent ("onlosecapture", OnButtonLoseCapture);
                    button.setCapture ();
                }
            }

                // initialy a longer delay
            ChangeInput (increase, 500);
        }
        
        function OnButtonUp () {
            if (changeTimer) {
                clearTimeout (changeTimer);
                changeTimer = 0;
            }

            if (capturedButton) {
                if (window.removeEventListener) {   // all browsers except IE before version 9
                    window.removeEventListener ("mouseup", OnButtonUp, true);
                }
                else {
                    if (capturedButton.releaseCapture) {    // IE before version 9
                        capturedButton.detachEvent ("onlosecapture", OnButtonLoseCapture);
                        capturedButton.releaseCapture ();
                    }
                }
                capturedButton = null;
            }
        }

        function OnButtonLoseCapture () {
            OnButtonUp ();
        }

        function Init () {
            var incButton = document.getElementById ("incButton");
            var decButton = document.getElementById ("decButton");
            if (incButton.addEventListener) {   // all browsers except IE before version 9
                incButton.addEventListener ("mousedown", function () {OnButtonDown (incButton, true)}, false);
                decButton.addEventListener ("mousedown", function () {OnButtonDown (decButton, false)}, false);
            }
            else {
                if (incButton.attachEvent) {    // IE before version 9
                    incButton.attachEvent ("onmousedown", function () {OnButtonDown (incButton, true)});
                    decButton.attachEvent ("onmousedown", function () {OnButtonDown (decButton, false)});
                    incButton.attachEvent ("onmouseup", OnButtonUp);
                    decButton.attachEvent ("onmouseup", OnButtonUp);
                }
            }
        }
    </script>
</head>
<body onload="Init ()">
    <input id="myInput" size="3" value="50" />
    <button id="incButton">Increase</button>
    <button id="decButton">Decrease</button>
</body>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content