element.onmouseup

onmouseupGlobalEventHandlers ミックスインのプロパティで、mouseup イベントを処理するイベントハンドラーです。

mouseup イベントは、ユーザーがマウスボタンを離したときに発生します。

メモ: onmouseup の反対の動作は onmousedown です。

構文

target.onmouseup = functionRef;

functionRef は、関数名または関数式です。この関数は、唯一の引数として MouseEvent オブジェクトを受け取ります。

この例は、マウスでクリックするとトーストが非表示になり、離すと再び表示されます。onmousedownonmouseup イベントハンドラーを使用します。

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;

結果

仕様

仕様書 状態 備考
HTML Living Standard
onmouseup の定義
現行の標準

ブラウザの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
onmouseupChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報