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 StandardThe 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.
Update compatibility data on GitHub
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
GlobalEventHandlers.onmouseup by Mozilla Contributors is licensed under CC-BY-SA 2.5.