HTMLのonmousedownイベント属性とは？使い方とサンプルコードを解説
HTMLのonmousedownイベント属性は、HTMLドキュメント内の要素上でマウスボタンが押し下げられた瞬間に、指定したJavaScriptを実行するためのイベント属性です。onclickイベントはボタンを「押して離す」まで待つ必要がありますが、onmousedownは「押した瞬間」に即座に反応できる点が特徴です。
基本構文
onmousedownイベント属性の構文は以下のとおりです。
<tagname onmousedown="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;
}
p {
margin: 30px auto;
}
</style>
</head>
<body>
<h1>HTML onmousedown Event Attribute Demo</h1>
<div class="circle" onmousedown="mouseDownFn()" onmouseup="mouseUpFn()"></div>
<p>Try to click the above red circle</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イベント属性がどのように動作するかを確認できます。
関連するマウスイベント
- onmouseup：マウスボタンを離したときに発火します。
- onclick：ボタンを押して離したあとに発火します。
- onmousemove：要素上でマウスカーソルが移動したときに発火します。
-
HTMLのonmousemoveイベント属性とは？構文・使い方をサンプルコード付きで解説
onmousemoveイベント属性は、HTMLドキュメント内の要素上でマウスポインタが移動している間に発生するイベント属性です。マウスが要素の上で少しでも動くたびに、指定したJavaScriptの処理が繰り返し実行されます。 似たようなイベントに「onmouseover」がありますが、こちらはポインタが要素に乗った瞬間に一度だけ発生するのに対し、onmousemoveは要素上でマウスが動き続けている限り何度も発生するという違いがあります。 onmousemoveイベント属性の構文 基本的な構文は以下のとおりです。 <tagname onmousemove="script&quo
-
HTMLのonmouseupイベント属性とは？使い方とサンプルコードをわかりやすく解説
HTMLのonmouseupイベント属性は、HTML要素上でマウスボタンが押された後に離された瞬間（ボタンアップ）にスクリプトを実行するためのイベント属性です。クリック操作の中でも「押して離す」動作の完了タイミングを検知したい場合に活用できます。基本構文onmouseupイベント属性は、以下のように対象となるタグに直接記述します。<tagname onmouseup="script"></tagname>実際の使用例ここでは、赤い円形の要素に対してマウスボタンを押したとき（onmousedown）と離したとき（onmouseup）で、それぞれ異なる処