GlobalEventHandlers.onmouseup
onmouseup
は GlobalEventHandlers
ミックスインのプロパティで、mouseup (en-US)
イベントを処理するイベントハンドラーです。
mouseup
イベントは、ユーザーがマウスボタンを離したときに発行されます。
メモ: onmouseup
の反対の動作は onmousedown
です。
構文
target.onmouseup = functionRef;
値
functionRef
は、関数名または関数式です。この関数は、唯一の引数として MouseEvent
オブジェクトを受け取ります。
例
この例は、マウスでクリックするとトーストが非表示になり、離すと再び表示されます。onmousedown
と onmouseup
イベントハンドラーを使用します。
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;
結果
仕様書
Specification |
---|
HTML Standard # handler-onmouseup |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
mouseup (en-US)
イベント