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