HTMLのonmouseupイベント属性とは？使い方とサンプルコードをわかりやすく解説
HTMLのonmouseupイベント属性は、HTML要素上でマウスボタンが押された後に離された瞬間（ボタンアップ）にスクリプトを実行するためのイベント属性です。クリック操作の中でも「押して離す」動作の完了タイミングを検知したい場合に活用できます。
基本構文
onmouseupイベント属性は、以下のように対象となるタグに直接記述します。
<tagname onmouseup="script"></tagname>
実際の使用例
ここでは、赤い円形の要素に対してマウスボタンを押したとき（onmousedown）と離したとき（onmouseup）で、それぞれ異なる処理を行うサンプルを紹介します。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
}
.circle {
background: #db133a;
height: 150px;
width: 150px;
border-radius: 50%;
margin: 10px auto;
transition: transform 0.2s;
}
p {
margin: 30px auto;
}
</style>
</head>
<body>
<h1>HTML onmouseupイベント属性のデモ</h1>
<div class="circle" onmousedown="mouseDownFn()" onmouseup="mouseUpFn()"></div>
<p>上の赤い円をクリックしてみてください</p>
<script>
function mouseDownFn() {
document.querySelector('.circle').style.transform = 'scale(0.5)';
}
function mouseUpFn() {
document.querySelector('.circle').style.transform = 'scale(1.2)';
}
</script>
</body>
</html>実行結果と動作の解説
このコードをブラウザで表示すると、画面中央に赤い円が表示されます。
赤い円の上でマウスボタンを押し続けると、onmousedownイベントが発火し、scale(0.5)によって円が縮小されます。
マウスボタンを離すと、onmouseupイベントが発火し、scale(1.2)によって円が拡大されます。
onmouseupイベント属性のポイント
- onmouseupは「ボタンを離した瞬間」に発火するため、ドラッグ操作の終了や選択確定などの処理に適しています。
- onmousedownと組み合わせることで、「押している間」と「離した後」で異なるUI表現を実現できます。
- JavaScriptからは
addEventListener('mouseup', ...)を使った同様の実装も可能です。 - タッチデバイスでは挙動が異なる場合があるため、必要に応じてtouchendイベントとの併用を検討しましょう。
-
HTMLのonmousemoveイベント属性とは？構文・使い方をサンプルコード付きで解説
onmousemoveイベント属性は、HTMLドキュメント内の要素上でマウスポインタが移動している間に発生するイベント属性です。マウスが要素の上で少しでも動くたびに、指定したJavaScriptの処理が繰り返し実行されます。 似たようなイベントに「onmouseover」がありますが、こちらはポインタが要素に乗った瞬間に一度だけ発生するのに対し、onmousemoveは要素上でマウスが動き続けている限り何度も発生するという違いがあります。 onmousemoveイベント属性の構文 基本的な構文は以下のとおりです。 <tagname onmousemove="script&quo
-
HTMLのonmousedownイベント属性とは？使い方とサンプルコードを解説
HTMLのonmousedownイベント属性は、HTMLドキュメント内の要素上でマウスボタンが押し下げられた瞬間に、指定したJavaScriptを実行するためのイベント属性です。onclickイベントはボタンを「押して離す」まで待つ必要がありますが、onmousedownは「押した瞬間」に即座に反応できる点が特徴です。 基本構文 onmousedownイベント属性の構文は以下のとおりです。 <tagname onmousedown="script"></tagname> サンプルコード 次の例では、赤い円形の要素にonmousedownイベント属性