The onmouseup
property of the GlobalEventHandlers
mixin is an EventHandler
that processes mouseup
events.
The mouseup
event fires when the user releases the mouse button.
Note: The opposite of onmouseup
is onmousedown
.
Syntax
target.onmouseup = functionRef;
Value
functionRef
is a function name or a function expression. The function receives a MouseEvent
object as its sole argument.
Example
In this example, a piece of "toast" hides when you click down with the mouse, and reappears when you release. It uses the onmousedown
and onmouseup
event handlers.
HTML
<div class="container"> <div class="toaster"></div> <div class="toast">Hello world!</div> </div>
CSS
.container { position: absolute; left: 50%; bottom: 20px; transform: translate(-50%); } .toaster { width: 160px; height: 110px; background: #bbb; border-radius: 10px 10px 0 0; } .toast { position: absolute; left: 50%; top: 50%; z-index: -1; width: 100px; height: 50px; padding: 10px; background: #ed9; border-radius: 10px 10px 0 0; transform: translate(-50%, -90px); transition: transform .3s; } .depressed { transform: translate(-50%, -50%); }
JavaScript
function depress() { toast.classList.add('depressed'); } function release() { toast.classList.remove('depressed'); } const toaster = document.querySelector('.toaster'); const toast = document.querySelector('.toast'); toaster.onmousedown = depress; document.onmouseup = release;
Result
Specification
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'onmouseup' in that specification. |
Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
onmouseup | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
See also
mouseup
event