HTML

It's an attribute that specifies the event to be executed the instant the user releases the mouse button after pressing it.

onmouseup 属性

HTMLのonmouseup属性とは？

onmouseup属性は、ユーザーがマウスボタンを押し下げた後に「離した瞬間」に発生するイベント（mouseupイベント）に対して、実行するスクリプトを指定するためのHTML属性です。つまり、ある要素でマウスボタンを押した後に指を離したタイミングで何らかの処理を行いたい場合に便利です。

<button onmouseup="alert('マウスボタンが離されました')">
	クリック（ボタンを離すとアラート）
</button>

上記の例では、ボタン上でマウスボタンを押した後に離すと、アラートが表示されます。

onmouseupの基本的な仕組み

マウスボタンが押下（onmousedown）されている状態から、指がボタンから離れた（onmouseup）という動作を監視し、その瞬間にイベントを発生させるのがonmouseup属性です。多くの場合、以下のような流れが考えられます。

onmousedown

マウスが要素の上で押される

onmousemove

マウスが移動する（ドラッグ中など）

onmouseup

マウスボタンが離される

たとえばドラッグ＆ドロップ機能では、「ドラッグ開始」時にonmousedownが発火し、「ドラッグ終了」時にonmouseupを検出して処理を行うことが多いです。

簡単な使用例

テキスト選択の終了を検知する

テキストエリアなどの要素で文字列を選択した後、マウスボタンを離した瞬間にイベントを発火して選択した文字列を取得する例です。

<p onmouseup="showSelectedText()">
	この段落をマウスドラッグして文字を選択し、マウスボタンを離すと選択された文字列がアラート表示されます。
</p>

<script>
	function showSelectedText() {
		const selectedText = window.getSelection().toString();
		if (selectedText) {
			alert(`選択されたテキスト: ${selectedText}`);
		}
	}
</script>

• window.getSelection()を使うと、ユーザーが選択したテキストを取得できます。
• onmouseupで文字の選択が完了したタイミングを検知するために利用します。

onmouseupと他のイベントの違い

イベントには類似のものが複数存在します。ここではonmouseupと組み合わせてよく使われるいくつかのイベントを簡単に比較します。

onmousedown

• マウスボタンが押された瞬間に発火
• 押しっぱなしの間には何度も発火しない（押される瞬間のみ）

onmousemove

• マウスポインタが移動する度に発火
• ドラッグ操作などに使われる

onclick

• 要素が「クリック」されたときに発火（押し下げ＋離す動作がセットになった場合に発生）
• onmousedownとonmouseup両方が同じ要素内で成立したときに結果としてonclickが実行される

onmouseupは、ユーザーがマウスボタンを「離した」というアクションに特化したイベントです。onclickとは異なり、単純な「押して離す」動作だけでなく、押して移動（ドラッグ）してから離す、という動作に対しても確実に実行されます。

イベントオブジェクト（MouseEvent）の扱い

マウスイベントが発生した際には、JavaScriptのMouseEventオブジェクトが引数として渡されます。onmouseupをHTML属性で直接定義する場合も、イベントハンドラ側でeventを受け取ることで座標情報などを取得できます。たとえば、以下のように書けます。

<button onmouseup="mouseUpHandler(event)">
	マウスアップイベントを検出
</button>

<script>
	function mouseUpHandler(e) {
		// クリックされた座標
		const x = e.clientX;
		const y = e.clientY;
		alert(`mouseup: マウスポインタが離された位置 (${x}, ${y})`);
	}
</script>

MouseEventオブジェクトで取得できる主なプロパティ

clientX / clientY

ブラウザの表示領域内でのマウス座標

pageX / pageY

ページ全体からのマウス座標（スクロールを考慮）

button

押したマウスボタンの種類（左=0、中=1、右=2 など）

ctrlKey, shiftKey, altKey, metaKey

修飾キーが押されているかの判定

こういった情報を組み合わせることで、より高度なユーザー操作を実装できます。

JavaScriptでのイベントリスナーとの比較

HTML属性で直接onmouseupを書く方法以外に、JavaScriptのaddEventListener()を利用してイベントを設定する方法もあります。たとえば以下のように書きます。

<button id="myButton">マウスアップ検出</button>

<script>
	const btn = document.getElementById('myButton');
	btn.addEventListener('mouseup', function(e) {
		console.log('マウスボタンが離されました');
		console.log('イベントオブジェクト:', e);
	});
</script>

主なメリット

• HTMLとJavaScriptのコードを分離できるので可読性が高い
• 同一要素に複数のマウスイベントを設定しやすい
• removeEventListenerで後から簡単に解除できる

HTML属性のonmouseupは小規模なスクリプトを直接書く場合にシンプルですが、大規模開発ではaddEventListener()を使うことが一般的です。

onmouseupを使った実用的な例

ドラッグ＆ドロップ機能の実装例

マウスを押したタイミングで「ドラッグ開始」、動かしている間は「要素の位置を追従」、離したとき（onmouseup）に「ドラッグ終了」という流れを実装できます。

<div id="draggable">ドラッグできます</div>

<script>
	const box = document.getElementById("draggable");
	let isDragging = false;
	let offsetX, offsetY;

	box.addEventListener("mousedown", (event) => {
		isDragging = true;
		// 要素の左上とマウスの座標の差分を保存
		offsetX = event.clientX - box.offsetLeft;
		offsetY = event.clientY - box.offsetTop;
	});

	document.addEventListener("mousemove", (event) => {
		if (isDragging) {
			box.style.left = (event.clientX - offsetX) + "px";
			box.style.top = (event.clientY - offsetY) + "px";
		}
	});

	document.addEventListener("mouseup", (event) => {
		if (isDragging) {
			isDragging = false;
			console.log("ドラッグ終了");
		}
	});
</script>

#draggable {
	width: 100px;
	height: 100px;
	background-color: lightblue;
	position: absolute;
	cursor: move;
	top: 20px;
	left: 20px;
}

• 上記のコードでは、onmouseupイベントをdocument全体で検知し、マウスを離したらドラッグ状態をfalseに戻します。
• こうすることで、ユーザーがドラッグ中に要素外でマウスを離した場合でも正しくドラッグ終了が処理されます。

キャンバス上でのお絵かき機能（線を引く）

HTML5の<canvas>要素上でお絵かきする場合など、押下（onmousedown）しながら移動（onmousemove）で線を描き、離した（onmouseup）タイミングでパスを終了する実装にも役立ちます。

onmouseupを使う上での注意点・ベストプラクティス

イベントのバインド位置を明確にする

• 要素に直接onmouseupをつける方法、親要素やdocumentに対してつける方法などがあります。ドラッグが要素の外に移動する可能性がある場合は、documentに対してmouseupをバインドするほうが安全です。

タッチデバイスの対応

• onmouseupはマウス操作に対応したイベントであり、タッチ端末（スマートフォンやタブレット）ではtouchendなど別のイベントが発火します。
• PCとモバイルの両方に対応したい場合は、ポインタイベント（pointerup）やタッチイベントを組み合わせる必要があります。

ユーザー体験への考慮

• onmouseupを使って何かを実行するとき、それがユーザーに対して予期せぬ動作にならないよう注意が必要です。特にボタンの中でonmouseupを使うと、標準のクリックイベントとの競合や二重処理が起こる可能性もあるので、実装の意図を明確にします。

イベントを無効化する場合

• 特定の条件でonmouseupの処理を無効にしたい場合は、JavaScript側でフラグ管理をしたり、removeEventListener()を使って一時的にリスナーを解除するアプローチがあります。

アクセシビリティの配慮

• キーボード操作しかできないユーザーのことも考慮し、マウスアップイベントのみで重要な処理を完結させない設計が望ましいです。キーボード操作に対してはkeydownやkeyupなどのイベントが該当するので、必要に応じてフォールバックを用意します。

よくある質問（FAQ）

Q1. onclickとonmouseupの両方を使いたい場合はどうする？

A. 両方を一つの要素に設定することは可能ですが、それぞれ発火するタイミングが異なるので、ロジックを整理して重複処理が起こらないように注意しましょう。一般的にクリックだけを処理したいのであればonclickを使い、ドラッグなど複雑な操作を扱いたい場合にonmousedownとonmouseupを組み合わせるのが良いでしょう。

Q2. 右クリック（コンテキストメニュー）でもonmouseupは呼び出されますか？

A. 呼び出されます。ただし右クリック時はデフォルト動作としてコンテキストメニューが表示されるため、イベントの扱い方によっては意図しない挙動になることがあります。カスタムの右クリックメニューを出したい場合などは、contextmenuイベントを使用し、デフォルト動作をキャンセルすることも検討してください。

Q3. 画面外でマウスボタンを離した場合はどうなる？

A. 通常、ブラウザウィンドウの外でマウスボタンを離すと、要素に対してはonmouseupイベントが発火しない可能性が高いです。ドラッグ操作などで正しく離したことを検知したい場合は、documentやwindowに対してマウスイベントを付与しておくと安全です。

まとめ

onmouseup属性は、マウスボタンが「離された」タイミングを捉える重要なイベントです。クリックやドラッグ＆ドロップなど、多くのユーザー操作の終了状態を検知するのに役立ちます。

基本的な使い方

HTML属性にonmouseup="～"またはJavaScriptのaddEventListener('mouseup', ～)を使う

クリックイベントとの違い

onclickは「押して離す」まで含めた完全なクリックとして処理されるが、onmouseupは「離した瞬間」を検知

応用例

テキスト選択の完了検知、ドラッグ＆ドロップの完了タイミング、お絵かき機能など

注意点

マウスの外（ブラウザウィンドウ外）でボタンを離した場合やタッチデバイスへの対応、アクセシビリティ面の考慮など

初心者の方は、まずはシンプルなクリック操作などで発火タイミングを確認し、動きを把握してみましょう。中級者以上の方はドラッグ操作やキャンバス上での描画処理など、より複雑なインタラクションでの活用方法を検討してみてください。onmouseupと関連イベントを組み合わせれば、マウスを使った豊富なUIを実現できます。